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Pròleg 


Introducció 


Introducció 


Aquest llibre està destinat a tots aquells que, tenint un coneixement 


bàsic de programació en Arduino' i el seu IDE, volen treballar amb 


els ESP8266" en aquest entorn. 


Porto treballant amb l'ESP8266 des de març del 2016. Es a dir, 
gairebé 3 anys. Si bé a l'estiu d'aquell any vaig explorar intensament 


les plaques NodeMCU, i vaig quedar meravellat, especialment amb 


la utilització de l'arduino IDE per a aquestes plaques , vaig descobrir 


tot el potencial d'aquestes joies un parell de mesos després, amb el 


sistema modular D1 mini. 


Aquest sistema reuneix tres avantatges importants: 


Es treballa en un entorn conegut, l'arduino IDE, de forma que 
els alumnes poden fer una transició suau des de la 
programació tradicional amb arduino. L'aparició en aquest 
entorn de la gestió de targetes externes amb la versió 1.6.4 de 
VIDE va facilitar molt l'adaptació d'aquest. 


Aquesta adaptació de l'IDE d'arduino introdueix noves 
prestacions com la interfície VViFi integrada, la creació de 
SDs virtuals amb el sistema de fitxers SPIFFS o la generació 
de freqiències variables de sortida. Realment s'ha fet un gran 
treball en aquest sentit. 


El sistema de shields del D1 mini permet un disseny realment 
modular. Amb un arduino tradicional podem tenir problemes 


1 La programació de l'ESP8266 no està limitada a l'IDE Arduino. Podeu veure 
altres llenguatges de programació admesos per aquest xip a Annex 2: Altres 
llenguatges de programació per l'ESP8266 

2 — Podeu veure més informació sobre l'ESP826 a Annex 1: Microcontrolador 
ESP8266 


IoT amb D1 mini (ESP8266) i codi Arduino 


per treballar amb 2 shields i algun component extem. Amb el 
D1 mini podem treballar fàcilment amb 4 o 5 shields i afegir 
components externs. Í a un preu molt raonable. 


Un any després els meus alumnes de 4t d'ESO ja utilitzaven aquests 
mòduls en els seus projectes de recerca, amb resultats sorprenents. Al 
curs segient vaig dissenyar la primera versió del hit que aquí us 
presentem, gràcies a l'aparició del primer distribuidor a Espanya 
d'aquests mòduls. Amb aquest Hit es va treballar a 1r de Batxillerat, 
amb un rotund èxit al Maxer Faire BNC 2018, on els meus alumnes 


van ser premiats amb un Mater of Merit PY0V. 


Al setembre de 2018 el meu nebot Javi Orts i jo vam dissenyar i 
fabricar el nostre primer shield pel D1 mini. 


A la jornada eEngrescant el jovent cap a la tecnox'SF9U. que es va 


realitzar a la ESEIAAT-UPC de Terrassa l'1 de desembre de 2018 
vaig tenir l'ocasió de presentar en un taller el hit, amb gran 
expectació i satisfacció per part dels professors assistents (va haver 
overboohing al meu tallerl). I allà mateix va sortir la idea de crear un 
grup de treball de professors per aprofundir i difondre el tema. 


En tres anys vaig fer innombrables proves, vaig tutoritzar diversos 
PREs, TRs, TFMs, projectes al taller de Batxillerat ... Aprenent cada 
vegada més amb els meus alumnes. 


3 Podeu veure una selecció d'aquests treballs a https://github.com/jorts64/hit- 
D1-mini/tree/master/projectes 
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Introducció 


Naturalment, ja em coneixeu: calia fer un llibre per transmetre tots 
els coneixements adquirits al llarg d'aquest temps, a la vegada que 
ordenava les meves idees. I aquí el teniul 


Jordi Orts 


Barcelona, 5 de gener de 2019 
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El hit D1 mini R1 


Fruit dels resultats de l'anterior Xit STPU, que em va permetre reduir 
el temps de muntatge de prototips al taller considerablement, i amb la 
intenció de guanyar compatibilitat" entre els mòduls i millorar les 
prestacions del Rit, a l'octubre del 2018 vaig dissenyar una 
revisióióT921 d'aquest on no em vaig limitar als productes disponibles 
al distribuidor espanyol. 


Amb aquest nou conjunt de materials és poden fer fàcilment multitud 
de prototips comercials. 


Aquest Xit, com el seu nom indica, està dissenyat al voltant del D1 
mini, una placa amb un ESP8266 amb 4MB de memòria", antena 
VViFi integrada i un bus que conté tots els senyals aprofitables de 
l'ESP8266. 


e 


eo - 
os" 
S s 
QZ 
gs 
ge 8: 
RE 
1 


4 Veure Annex 3: Connexions i compatibilitat dels shields 
5 Si necessiteu més memòria, 0 una antena VViFi més potent, podeu fer servir el 
D1 mini pro de 16 MB. Més informació a Annex 4: D1 mini pro 
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El Rit D1 mini R1 


Contingut del (sit 


Tripler base amb D1 mini, 
terminals mascle a la tercera 
columna per I/O i alimentació 
(GND-3,3V-5V), connector 3 
pins sortida de servo (connectat a 
D6) a 5V i connexions I2C 


OLED Shield V2.1.0 


Terminals M 


Matrix led shield 


Terminals M 


RTC shield 


Terminals M-F 


8 8 D1-SCL D 


D6 clocç 88 
Es DS1307 8 Ò 8 8 D2-SDA 
— IA EA q 
Gos LE eNo(8) 
Gas VI ra 6) 


vés sia El 
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Buzzer shield 


Terminals M-F 


1-button shield 


Terminals M 


RGB shield 
Terminals M 


Reconfigurat al pin D8 


Relay shield V2.0.0 
Terminals M 


Reconfigurat al pin D7 
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en le) 
Buzzer Shield 


1-BUTTON Shield 
U2.9.0 


El Rit D1 mini R1 


DHT shield 

IVVEMOS) 
Terminals M-EF 8 DHT SHIELD 
IR controller Shield 


Terminals M 


PIR shield 


Terminals M 


Reconfigurat al pin DG 


Mòdul LED RGB 


Mòdul 6 LEDs 
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Mòdul 4 polsadors 


Mòdul sensor de llum I2C 
BH1750FVI 


Mòdul acceleròmetre Y giroscopi 
LC GY-521 


Mòdul potenciòmetre 


Mòdul — sensor — temperatura 
DS18B20 


16 


El Rit D1 mini R1 


Microservo 3,7g 


Arduino Pro mini com a esclau 
PC 


10 cables Dupont F-F 
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Part Il. Programant el D1 mini com si 
fos un Arduino. Utilitzant els shields 
del Rit. 


És típic quan un comença a treballar amb Arduino carregar l'exemple 
Blinx, que fa pampallugues al led integrat en la placa Arduino. 


Nosaltres podem començar igual amb el D1 mini. Però haurem de fer 
servir l'exemple creat especialment pel ESP8266: 


EL menen Ch, deci6a l'Arduino 1.8.5 OO FETS 
Edita Esbós Eines Ajuda 
Nou 
Obrir... 
Obre recent 


, 
Ctrlsyv/ 03.Analog 
Ctrlas / 04. Communication 


Anomenai desa... CtrleShiftzs / 05.Control 


Configuració de la pàgina — CtrisShiftzP. EEES 
07.Display 
Sortir CtrlaP 
08.Strings 
Preferències CtritCommal 99, U5B 
Tancar Ctrl Q J 10.5tarterRit, BasicRit 
11.ArduinolsP 
Examples For any board 
Bridge 
Ethernet 
Firmata 
LiquidCrystal 


Examples For LOLIN(VVEMOS) D1 R2 €. mini 

ArduinoOTA 
ial DNSServer 
EEPROM 
ES N 
ESP8266AVRISP. Blintv/thoutDelay 
ESP8266HTTPClient CallSDRFunctions 
ESP8266httpUpdate ChechFlashConfig 
ESP8266HTTPUpdateServer ConfigFile 
ESP8266LLMNR l2SInput 
ESP8266mDNS l2STransmit 
ESP8266NetBIOS interactive 
ESP8266S5DP NTP-TZ-DST 
ESP8266VVebServer RTCUserMemory 
ESP8266V/IFi SerialDetectBaudrate 
ESP8266VViFiMesh SigmaDeltaDemo 
Ethernetl(esp8266) TestEspApi 

Li 
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Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 
shields del hit. 


la NIC LA dUINO BS o DES a ES 


Eitxer Edita Esbós Eines Ajuda 


void setup() Í 
pinMode(LED BUILTIN, OUTPUT), Initialize the LED BUILTIN pin as an output 
t 


the loop fundtion runs over and over again forever 
void loopí() f 

digitalMrite(LED BUILTIN, LOV), // Turn the LED on (Note that LON is the voltage level 

but actually the LED is on, this is because 

// it is active lov on the ESP-01) 

delay(1000), Vait for a second 

digitalvrite(LED BUILTIN, HIGH), ( Turn the LED f by maíing the voltage HIGH 

delay(2000), // Nait for tvo seconds (to demonstrate the active lo, LED) 
t 


2, Flash, 4M (2M SPIFF 


Fixeu-vos com al programa s'utilitza el pin LED BUILTIN. És un 
sinònim de D4, nom del pin serigrafiat a la placa del D1 mini, que en 
realitat és el pin GPIO2. És a dir, si substituim LED BUILTIN al 
programa anterior per D4 o 2, el programa farà exactament el mateix. 


Un error típic al programar el D1 mini és posar només el número de 
la pota serigrafiada. No és el mateix. Cal posar la D abans, ja que el 
número de pota serigrafiat no coincideix amb la pota física del xip: 
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IRST 


3,3V 


G 
o 
Ll 
x 


s 
Ce) a 
aC a 
: 
a 
DE ID : 
: 


ESP pin 


ED ED 


Ja podeu enviar el programa al D1 mini. El led blau integrat farà 
pampallugues. 


Tripler Base 


s 
ES 
L 


I 
I 
I 


)O 


i ogT'. 


od 
dg dg 


OCOOGCOGOOG0ÈE 
OOO0O0OO OC OO 
COOCCC OO OE 
)00000000 


Es 


RRI 
(600 OOQ0 


OOOO 


oo 


) 


al: 
o ALL 
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Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 
shields del hit. 


Per altra banda, si us fixeu bé, aquest led reacciona a l'inrevés del 
que un espera. Quan posem un LOV/, el led s'encén (durant 15), i 
quan posem un HIGH s'apaga (durant 28). 


Aquest comportament només el trobem en aquest led blau, no afecta 


als leds connectats exteriorment. Ho podeu comprovar connectant un 
led extern entre la pota D4 i GND. 


1 14114 


Fixeu-vos com he col:locat el mòdul de leds, amb GND coincidint 
amb el GND de la base triple. Veureu com quan s'apaga el led 
integrat s'encén el led blanc, i a l'inrevés. 
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1-button shield 


Aquest shield ens ofereix un 
polsador connectat a la pota D3. 
Quan premem el polsador, aquest 
connecta la entrada a GND. Es a 
dir, obtenim un HIGH si no 
prenem el polsador, i un LOV/ si 
ho fem. 


Podeu — comprovar el —seu 
funcionament amb el meu 
exemple button: 


const int buttonPin - D3, 
const int ledPin - BUILTIN LED, 


void setup() 
pinMode (buttonPin, INPUT), 
pinMode (ledPin, OUTPUT), 

) 


void 100p() 4 
if (digitalRead(buttonPin) s- HIGH) (4 


41-BUTTON Shield 


digitalrite(ledPin, HIGH), é// button released, LED Off 


) else ( 


digitalrite(ledPin, LON), // button pressed, 


) 
À 


Tripler Base 


U1.9.0 


41-BUTTON Shield 1 
v208 € 


22 


LED on 


U2.0.8 


Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 
shields del hit. 


Relay shield V2.0.0 


Aquest mòdul porta un relé 
(nosaltres — el —farem — servir 
connectat a D7) amb el qual 
podem controlar fins i tot circuits 
a CA de 220V. Fixeu-vos que els 
límits de càrrega depenen de si 
aquesta la connectem a NO o a 
NC: 


e NO: 
SA(250VAC/30VDC), 
10A(125VAC) 
MAX:1250VA/150VV 

e NC: 
3A(250VAC/30VDC) 
MAX:750VA/90VY 


Podeu — comprovar — el —seu 
funcionament amb —el —meu Di — Control 

exemple relay. No oblideu canviar SSL ICECIa l DLE 
el relayPin a D7, tal com es "—Settings 7 
mostra al llistat segiient: 
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//const int relayPin € D1, // comment for Rit D1 mini R1 
const int relayPin € D7, // uncomment for Rit D1 mini R1 
const long interval - 2000, // pause for tmuo seconds 


void setup() 
pinMode(relayPin, OUTPUT), 


-— 


) 


void 100p() 4 
digitalrite(relayPin, HIGH), 
delay(interval), 
digitalrite(relayPin, LOV), 
delay(interval), 


) 


// turn on relay 
// pause 
// turn off relay 
// pause 


Tripler Base 


L: I 
JAS22AB342 11122. 1.0.8 
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Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 


shields del hit. 


RGB shield 


Aquest mòdul porta 7 leds RGB 
VVS2812B, que fan servir un 
protocol d'un sol fil (per defecte 
connectat a D4). Nosaltres el fem 
servir connectat a D8. 


La forma més senzilla d'utilitzar 
aquest shield és amb la llibreria 
Adafruit NeoPixel, que podem 
instal'lar des del gestor de 
llibreries de l'Arduino IDE. 


Utilitzant la llibreria Adafruit 
NeoPixel, que podem instal-lar 
des del gestor de llibreries, 
podem provar aquest senzill 
exemple: 


28 


Produced by 
HEMOS.CC 


D6 
Le 
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Hinclude sAdafruit NeoPixel.ho 


Adafruit NeoPixel pixels - Adafruit NeoPixel(7, D8, NEO GRB t- NEO RHZ800), 


void setup() 


pixels,begini), // This úmitializes the NeoPixel library, 


) 


void 100p() ( 
for (int 1-0: i87255,i41)14 


pixels.setPixelColor(O, 
pixels.setPixelColor(1, 
pixels.setPixelColor(2, 
pixels.setPixelColor(3, 
pixels.setPixelColor(4, 
pixels.setPixelColor(5, 
pixels.setPixelColor(6, 


pixels. 


pixels 


pixels. 
pixels. 
pixels. 
pixels. 
pixels. 


Color(i, 
COLOR, 
Color(i, 
Color(O, 
Color(O, 
Color(0, 
Color(i, 


DD a a a Di es 


pixels.shom(): // This sends the updated 
delay(10), // Delay for a period of time 
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HH blanc, 

/í vermell. 

IH groc, 

i verd, 

EH eyan, 

// blau. 

, // magenta. 

pixel color to the harduare. 
(in milliseconds). 


El el el el el le el 
um 


: ma 
a 
4 
LL 
4 
hi 
x 
4 
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Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 
shields del hit. 


Matrix led shield 


Matriu de 8x8 leds vermells amb 
8 nivells d'intensitat. Utilitza D5 
(CLR) i D7 (DIN) 


Amb la llibreria VEMOS Matrix 
LED Shield és relativament 
senzill utilitzar aquest shield. 


so 
és 
go 

8) 
és 
és 
é. 
és 


Amb la funció dot(x,y valor) 
fixem — els — punts — encesos 
(valor—-1) i apagats (Valor 0). 
Una vegada fixats, amb la funció 
display() s'actualitza la matriu de 
leds. 


o 


- 


LEO Shield 


Gràcies a un editor online" podem fer animacions i definir pantalles: 


M Safatad'en x — FX Classes x (El institutPric. x l El Recursos-7 x — 38 Public-Dro. x / HB LEDMatrix x — 4 a 


€ 3 C Q 8 hitps/jxantoroharagithubio/led-matriceditor/H55545450 


cno. Em importat d 


Library 


Arduino/C cas byte arrays 


. Set Ne: Digits / Letters / Signs code 


. Set Ne2: Digits / Letters / Signs 


1 Other 
. Set No3: Digits / cons 


Free VYriting Tool 


Insert Update Delete 
Ei ES EC 


00080cfefffe0c08 


Use Drag-and-Drop to reort rder matrices o 


4 , 


6 Disponible a https://xantorohara.github.io/led-matrix-editor/ 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Al meu exemple matrix LED animation hem fet servir aquest editor, 
i us pot servir com a plantilla. Només cal canviar l'array IMAGESTJ: 


Hinclude cNEMOS Matrix LED.ho 
MLED mled(5), //set intensity-5 


const uint64 t IMAGESI) - 4 
Ox00080cfefffe0co08, 
OxX0004067f7f7f0604, 
0Ox0002033f3f3f0302, 
Ox0001011f1f1f0101, 
Ox0000000f0fOf0000, 
Ox0000000707070000, 
Ox0000000303030000, 
Ox0000000101010000, 
Ox0000000000000000 

Ne 

const int IMAGES LEN € sizeof(IMAGES)/8, 


void setup() 
) 


void displayImage(uint64 t image) ( 
RO UE BIO de ss OE SN 
byte rou s (image 22 i t 8) 8 OXFF, 
for. Cine ji Os qe 8, ji) 1 
mled.dot(j, 7-i, bitRead(rom, j)), 
j 


) 
mled.display(): 
) 


int i SO, 


void 100p() 4 
displayImage(IMAGESTIil), 
if (Pfi os IMAGES LEN ) ( 

i SO, 


) 
delay(100), 
) 
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Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 
shields del hit. 


Buzzer shield 


Afegeix un petit buzzer al nostre 
sistema. 


VVEMOS De 


és Buzzer Shield 


IQ ve v1.0.8 1 Q 
lo 05 a, 02 Q) 
Q 06 48 gen D3 Q 
Q738 " D4 Q 


Nosaltres — treballem —Òòamb la 
connexió amb el pin D5 (per 
defecte). 

La implementació per al IDE Q d ds 
Arduino del ESP8266 introdueix 
una funció molt útil per a aquest 
shield, analogVrriteFreq(freg), que 
permet fixar la frequencia de la 
sortida i ens permet fer melodies. 


5 


NEMOS.ES 


Al meu exemple sirena podeu veure com utilitzar aquesta funció: 


int buzzersD5, //Buzzer control port, default D5 


void setup() 
pinMode(buzzer, OUTPUT), 
digitalldrite(buzzer, LOU), 
) 


void 100p() 
tor (int i-0:i85/437)4 


analogriteFreq(988), // 988 Hz, nota Do 
analogurite(buzzer, 512), // Ona simètrica 
delay (700), // 80,7 s durada 
analogurite(buzzer, 0), // silenci 
delay(50), // 0,05 s 
analoguriteFreq(587), Mo Set Hz, mota Si 
analogurite(buzzer, 512), 
delay (700), 
analogurite(buzzer, 0), 
delay(50), 

) 

pinMode(buzzer, OUTPUT), 

digitalrite(buzzer, LOU), // silenci 

delay (5000), 
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IoT amb D1 mini (ESP8266) i codi Arduino 


EO — é BIED:: 


ng - 
Buzzer Sena 
y8 


vi6.6 


Podeu trobar informació molt útil a l'Annex 7: Taula de freqiiències 
per a les notes musicals. 
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Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 
shields del hit. 


DHT shield 


Sensor de temperatura i humitat 
DHT11 amb protocol I2C (potes 


D1i D2). 


Temperatura: -20Y600C (£0.52C) 
Humitat: 20-9506RH (€500RH) 


És molt 


fàcil el seu ús amb la 


VEMOS DHT12 Arduino Library. 
Al meu exemple DHT es llegeix la 
temperatura i la humitat i es 
mostren pel canal sèrie 


Htinclude sNEMOS DHT12.hoò 
DHT12 dhtl): 


void setup() 
Serial.begin(115200), 


) 


void 100p() 


ifidhti2, 
Serial. 
Serial. 
Serial. 
Serial. 
Serial. 
Serial. 


Serial 


get()5-0)( 
print("Temperature in Celsius : 
println(dhti2.cTemp), 


print("Temperature in Fahrenheit : " 


println(dhti2.fTemp), 
print("Relative Humidity : "), 
println(dhti2.humidity), 


EBA 


) 
delay(1000), 


) 
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U2.8.8 
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IoT amb D1 mini (ESP8266) i codi Arduino 


emperature in Fahrenheit : 
Relative Humidity : 33.20 


Temperature in Celsius : 26.70 
Temperature in Fahrenheit : 80.06 
Relative Humidity : 33.20 


Temperature in Celsius : 26.80 
Temperature in Fahrenheit : 80.24 
Relative Humidity : 33.20 


Temperature in Celsius : 26.70 
Temperature in Fahrenheit : 80.06 


Relative Humidity : 33.10 1 
F 
Desplaçament automàtic Sense salts de línia El f 15200 baud El Clear output 


06 AG RST 


06 


ARARARRI 
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Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 
shields del hit. 


OLED Shield 


Aquest mòdul porta un display ms 
gràfic OLED de 64x48 pixels EE 
mitjançant el protocol I2C (D1 4 
SCL, D2 SDA). 


Els nostres hits fan servir la versió hg 
2.0.0, que inclou dos polsadors de 
connexió configurable (per LA 
defecte D3 i D4, que són els que É 4 
fem servir). 


Els millors resultats els he 
aconseguit amb la llibreria 
sparhfun/Micro OLED Brealout, 
encara que ha calgut un exemple 
modificat (OLED) configurat per 
a I2C i amb alguns canvis per a 
evitar — problemes — amb el 
VVatchDog. 


Tenim moltíssimes funcions, i 
inclouen funcions gràfiques molt 
avançades. Les més importants 
per mostrar un text a pantalla son 
beginÚ),, clear(), setFontIype(), 
setCursor(), printOÓ i printin(). 
Recordeu fer sempre un displayQ 
al final, o no es mostrarà res per 
pantalla. 


El meu exemple OLED inclou tot tipus de funcions. Però per 
començar crec que serà més pràctic el meu exemple OLED test: 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Hinclude sire.ho // Include Nire if you're using I2C 

Hinclude eSFE MicroOLED.ho // Include the SFE MicroOLED library 
tdefine PIN RESET 255 // Connect RST to pin 9 

tdefine DC JUMPER 0 

MicroOLED oled(PIN RESET, DC JUMPER), // 12€ declaration 


void setup() 
í 


oled.begin(), // Initialize the OLED 
oled.clear(ALL), // Clear the display's internal memory 
oled.display(), // Display mhat's in the buffer (splashscreen) 
delay(1000), // Delay 1000 ms 
oled.clear(PAGE), // Clear the buffer. 

) 


void 100p() 
í 


oled.clear(PAGE), 
oled.setFontType(1), 
oled.setCursor(0,0), 
oled.println("uhat's up, doc2"), 
oled.display(), 

delay(1500), 


Tripler Base 
mag V1.0.0 
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Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 
shields del hit. 


RTC shield 


Aquest shield porta un rellotge en 
temps real (Real Time Cloch) amb 
connexió I2C. 


Aquest és un dels pocs shields que 
no fabrica V/emos / Lolin, si no 
RobotDyn, fabricant que també 


De 89, MS 
EE 5a III A 
comercialitza una versió - CRM NEN GND) 
datalogger que, a més del rellotge é 
I2C, inclou un lector microSD. 


La llibreria RTClib (Adafruit) 
incorporada al Library manager 
funciona — perfectament — amb 
l'ESP8266, com podeu comprovar 
amb el meu exemple RTC,. test. 


m Tripler maça e ec 


208222954-121137 


D 
ARIAra rar 
DB Se LLEI 
3v3 I —jr Tap tam 
quia ber ra l 


LL LL 


eren 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Hinclude sNire.ho 


Hinclude "RTClib.h" 


RTC DS1307 RTC, 


void setup () 


( 


Serial.begin(9600), 


Vire.begin() 
RTC.begin(), 


// ChecR to see if the RTC is Reeping time. If it is, load the time from your computer. 


if (1 RTC.isrunningÚ)) 4 


Serial.printlin("RTC is NOT runningi"), 
// This mill reflect the time that your sRetch mas compiled 


RTC,adjust(DateTimel DATE , 


) 
) 
void l00p () 1 


DateTime nov 


RTC. non), 


Serial.print(nom.month(), DEC), 


serial. print( i): 
Serial.print(nomn.day(), 
Serial, pranté its 
Serial.print(non.year(), 


serial. print() 


ol 
Serial.print(nom.hour(), 
Serial.print(':'), 


BEC): 
BEC): 


DEC) 5 


Serial.print(nom.minute(), DEC), 


Serial.print(':'), 


Serial.print(nom.second(), DEC), 
serial. perintimi) 


delay(1000), 


ME j)S 


20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 
12/17/2018 20: 


Desplaçament automàtic 


10 
10 
10 
10 
10 
10 
10 
10 
10 
10 
10 
10 
10 
10 
10 


142 
143 
144 
145 
146 
147 
148 
149 
:50 
51 
152 
153 
154 
:55 
:56 


(Sense salts de línia El (esoo baud i Clear output 
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Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 
shields del hit. 


PIR shield 


Aquest shield ens dona un 
detector de presència per calor 
(PIR). Quan detecta una persona, 
dona una sortida HIGH. 


Nosaltres el tenim connectat a 
D6. 


A tots els efectes el podem 
utilitzar com un interruptor 
d'entrada connectat a la pota D6, 
però heu de pensar que una 
vegada que es dispara, triga uns 
38 des de que no detecta gent a 
tornar la sortida a LOVV. 


Podeu provar el meu exemple 
PIR test per comprovar el seu 
funcionament. 
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IoT amb D1 mini (ESP8266) i codi Arduino 


const int buttonPin - D6, 
const int ledPin - BUILTIN LED, 


void setup() 
pinMode (buttonPin, INPUT), 
pinMode(ledPin, OUTPUT), 
digitalrite(ledPin, HIGH), // LED Off 


) 


void 100p() ( 
if (digitalRead(buttonPin) s- HIGH) 4 
digitalrite(ledPin, LO), 0é// people detected, LED on 
) else ( 
digitalrite(ledPin, HIGH), // LED Off 


) 


9 9) 
LOLIN 
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Part I. Programant el D1 mini com si fos un Arduino. Utilitzant els 


shields del hit. 


IR controller Shield 


Aquest —shield —incorpora. 4 
emissors i 1 receptor de codis IR. 
Per defecte els emissors estan 
connectats a D3 i el receptor a 
D4. — Nosaltres — mantindrem 
aquestes connexions. 


Amb la llibreria —IRremote 
ESP8266 Library —(es pot 
instal'lar des del gestor de 
llibreries) tenim diferents 
exemples per rebre i enviar codis 
IR. 


Us deixo dos exemples: 
e — IRrx, que rep i decodifica 
codis IR 
e — IRtx, que envia codis IR 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Hinclude cIRremoteESP8266. ho 
Hinclude sIRrecv.ho 
Hinclude sIRutils.ho 


IRrecv irrecv(D4), 
decode results results, 


void setup() 4 
Serial.begin(115200), 
irrecv.enableIRIn():, // Start the receiver 


) 


void 100p() 
if (irrecv.decode(gresults)) 4 
// print() 8 printin() can't handle printing long longs. (uint64 t) 
serialPrintUint64(results.value, HEX), 
Serial.printin(""), 
irrecv.resume(), // Receive the next value 


i 
delay(100), 


Tripler Base La Cal 
vies P 
sor apers 
41 TB 


. 
- 


Hinclude cIRremoteESP8266.hoò 
Hinclude eIRsend.ho 
IRsend irsend(D3), 


void setup() 4 
irsend.begin(), 


) 


void 100p() 4 
irsend.sendSony(0xa90, 12, 2), 
delay (2000), 

) 
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Part II. Connectats amb xarxa 


Part ll. Connectats amb xarxa 


Fins ara no hem utilitzat la potència VViFi del nostre ESP8266. Ha 
arribat el moment de fer-la servir. 

Hinclude cESP8266Mi Fi ho i 
Aquesta senzilla línia dona sentit al títol d'aquest llibre. IoT. Internet 
of Things. Internet de les coses. I com podem dir IoT sense connexió 
a Internet2 La veritat, n'estic fart de tallers, cursos, llibres i vvebs 
d'Arduino que s'anuncien com a lor i la connexió a Internet no 
apareix enlloc. 


Aquest, en canvi, és un llibre orientat a IoT. Il amb aquest capítol 
veureu que va de debòl 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Connexió com a estació 


Per connectar-nos a una xarxa existent, com faríem amb qualsevol 
ordinador, hem de fer servir la funció 


NiFi.begin("netmuorR-name", "pass-to-netuorR"), 
on cal canviar netvorh-name pel nom de la nostre xarxa i 
pass-to-netvvorR per la contrasenya, que deixarem en blanc si es 
tracta d'una xarxa oberta. 


Cal comprovar que hem aconseguit connectar-nos amb la funció 
VviFi.status(). Veiem un exemple: 


Hinclude cESP8266MNiFi. ho 
void setup() 
Ú 


Serial.begin(115200), 
Serial.printin(), 


ViFi.begin("netxuorR-name", "pass-to-netmorR"), 


Serial.print("Connecting"), 
mhile (MiFi.status() l- VL CONNECTED) 
( 
delay (500), 
Serial print(t: tt) 
) 
Serial.printin(), 


Serial.print("Connected, IP address: "), 


Serial.printin(NiFi.localIP()), 
) 


void 100p() () 


42 


Part II. Connectats amb xarxa 


Un servidor vveb. Controlant el relé via VViFi 


La majoria de vegades el que volem es connecatr-nos al nostre 
ESP8266 i recollir dades o executar ordres. La millor forma és amb 


un servidor vveb. Per això caldrà afegir al principi 


Caldrà definir, típicament al setup) com reacciona el servidor a les 
diferents per adjudicant a cada pàgina una funció amb 


Una Eres definides Gi pàgines i la funció per quan es demani una 
no contemplada cal engegar el servidor amb 


( Tr ies Base EA UEMOS.CC 


s OJo 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Hinclude cESP8266MiFi.ho 
Hinclude cNiFiClient.ho 
Hinclude cESP8266MebServer . ho 


const chart ssid - "la teva xarxa aqui", 
const chart passmord — "contrasenya de xarxa aqui", 


ESP82664ebServer server (80), 
int estat, 


void handleRoot() 4 
server.send(200, "text/plain", "hello from esp82661"), 
) 


void engegar() 
digitalNrite(D1, true), 
estat-1l, 
server.send(200, "text/plain", "ON"), 
) 


void apagar() í 
estat-0, 
server.send(200, "text/plain", "OFF"), 
digitalNrite(D1, false), 
) 


void canviar() 4 
if(estat--O)( 
digitalNrite(D1, true), 


estat-1l, 
) 
elsef 
digitalNrite(D1, false), 
estat-O0, 
L 
server.send(200, "text/plain", "CHANGED"), 
) 
void handleNotFound()í 
String message - "File Not Foundinin", 


message ts "URI: ", 

message ts server.uri(), 

message ts "NnMethod: ", 

message ts (server.method() s- HTTP GET)2"GET":"POST", 
message ts "NnArguments: ",message ts server.args(), 
message t-s "Vn", 

for (uint8 t i-0, isserver.args(): itt)í( 


message ts " " £ server.argName(i) t ": " £ server.arg(i) £ "Vn", 
) 
server.send(404, "text/plain", message), 


) 


void setup(void)í 

pinMode (D1, OUTPUT), 

Serial.begin(115200), 

NiFi.begin(ssid, passmord), 

Serial.printin(""), 

// Nait for connection 

mhile (MiFi.status() l- NL CONNECTED) 4 
delay (500), 
Seria pintes 
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Part II. Connectats amb xarxa 


) 
Serial.printin(""), 
Serial.print("Connected to "), 
Serial.printlin(ssid), 
Serial.print("IP address: "), 
Serial.printin(NiFi.localIP)), 


server.on("/", handleRoot), 
server.on("/on", engegar), 
server.on("/off", apagar), 
server.on("/change", canviar), 
server.on("/inline", I) ()4 
server.send(200, "text/plain", "this morRs as mell"), 


sas 


server .onNotFound(handleNotFound), 


server.begin(), 

Serial.printin("HTTP server started"),estat-O, 
digitalNrite(D1, false), 

h 


void loop(void)í 
server.handleClient(), 


) 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Connexió com a AP. Control VViFi d'un 
semàfor 


El nostre ESP8266 pot crear una xarxa pròpia, a la que podem 
connectar-nos amb el nostre ordinador o mòbil. 


En lloc del VéiFi.begin() que fèiem servir la connexió com a estació, 
farem servir 


NiFi.mode(lIFI AP), 
NiFi.sSoftAP(ssid, passmord), 


i ja el podrem fer servir. 


Veiem com funciona amb el meu exemple semafor RGB Viifi.ino: 


Ll 


OO 
ne 


ela : 


Hinclude cESP8266MNiFi. ho 
Hinclude sNiFiClient.ho 
Hinclude cESP8266MebServer . ho 


const char tssid - "Semaforo", 
const char tpassmord - "robotica", 


ESP8266ebServer server ( 80 ): 


Hinclude sAdafruit NeoPixel.ho 


tdefine PIN D8 
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Part II. Connectats amb xarxa 


tdefine LED NUM 7 
Adafruit NeoPixel leds -s Adafruit NeoPixel (LED NUM, PIN, NEO GRB - NEO RHZ800), 


int trs20090, 
int tys500, 
int tg-1500, 


nn 


String mensaje - dl 


fbfemeceeeeec- CODIGO HTML PAGINA DE CONFIGURACION--------2------- 
String pagina s "cIDOCTYPE htmlo" 

"ehtmlo" 

"eheadò" 


"etitlesControl de temps semafors/titlex" 

vemeta charsets'UTF-8'2" 

"emeta name-'viemport' contents 'midth-device-midth'/o" 

"e/heado" 

"ebodyo" 

"etable stylec'midth:10084'ocform action-'canviar' method-'get'o" 

"etroctdo Temps vermell:e/tdoetdocinput types'range' names'fr' min-'1' maxs'60' 
valuec'3' step-'l'oe/tdoe/tro" 

"etroctdo Temps groc: e/tdoctdocinput types'range' names'fy' mins'1' max-'60' 
valuec'l' step-'l'oe/tdoe/tro" 

"etroctdoTemps verd: e/tdoctdocinput types'range' names'fg' mins'l' max-s'60' 
values'2' step-s'l'oe/tdoe/tro" 

"etroctdoe/tdoctdocinput types'submit' values'CANVIAR' /oe/tdoe/tro" 
"e/formos/tables" 

"e/bodyo" 

"efhtmis", 


void espera(int temps) ( 
unsigned long ara € millis(), 
unsigned long seguent € ara t temps, 
delay(1), //refresh matchdog 
mhile (millis()seseguent)í 

server.handleClient(), 

) 

) 


void paginacanvi() £€ 
server.send(200, "text/html", pagina), 
) 


void canviar temps() € 
trsserver.arg("fr").toInt() 1000, 
tysserver.arg("fy").toInt()"1000, 
tgsserver.arg("fg").toInt() 1000, 
paginacanvi(), 


void led set(uints R, Uintè G, Uinte B) 4 
for (int i s O, i € LED NUM, itt) 4 
leds.setPixelColor(i, leds.Color(R, G, B)): 
leds. shom(), 
delay(50), 
) 
) 


void red set() 4 
leds.setPixelColor(1, leds.Color(100, 0, 0)): 
leds.setPixelColor(O, leds.Color(10, 10, 0)):, 
leds.setPixelColor(4, leds.Color(0, 10, 0)), 
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IoT amb D1 mini (ESP8266) i codi Arduino 


leds. shom(), 
espera(tr), 


) 


void yellon set() 4 
leds.setPixelColor(1, leds.Color(10, 0, 0)), 
leds.setPixelColor(0, leds.Color(50, 50, 0)): 
leds.setPixelColor(4, leds.Color(O0, 10, 0)), 
leds.shom(), 
espera(ty), 

) 


void green set() ( 
leds.setPixelColor(1, leds.Color(10, O, 0)), 
leds.setPixelColor(0, leds.Color(10, 10, 0)): 
leds.setPixelColor(4, leds.Color(0, 100, 0)): 
leds. shom(), 
espera(tg), 


void setup() 4 
NiFi.mode(lIFI AP), 
NiFi.sSoftAP(ssid, passmord), 
server.on("/", paginacanvi), 
server.on("/canviar", canviar temps), 
server,begin(), 
leds begin Os 
led set(0, 0, 0), 


void 100p() 4 
green set(), 


yellon set(), 
edES SES 


Fixeu-vos que al programa en lloc de delay() faig servir espera(), una 
funció que he definit i que mentre espera el temps marcat en ms està 
pendent de les peticions vveb amb handleClient ).. 
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Part II. Connectats amb xarxa 


AP -Y estació 


És possible generar una xarxa com a AP i, a la vegada, estar 


connectat a una altra xarxa com a estació: 


Encara que són dues xarxes diferents, farà servir un únic canal: el 
que utilitza la xarxa a la que es connecta com a estació. 


Una aplicació interessant d'aquesta doble connexió és la creació de 
xarxes de malla. Saida Sillo va fer un TR que vaig tutoritzar amb el 
títol eXarxa detectora d'incendis forestalsx" on utilitzava aquestes 
xarxes per cobrir tot un bosc amb sensors i permetre enviar una alerta 
a internet. Cada sensor és, a la vegada, AP i estació dels seus veins. 
Estació per transmetre l'alerta, AP per rebre les alertes dels seus 
veins i passar la informació a la resta com a estació. 


Una altra aplicació frequent és utilitzar l'accés AP com a porta del 
darrera per a configurar el dispositiu quan perd la connexió a la xarxa 
com a estació. D'aquesta forma podem canviar el nom de la xarxa i 
contrasenya amb que es connecta. 


També és freqiient aquesta doble connexió en un dispositiu mòbil (al 
que accedirem com a AP des del mòbil o tablet fora de casa) al que 
volem accedir des d'un ordinador fix a casa (és farragós haver de 
canviar la configuració d'una torre per accedir al nostre dispositiu, 
impossible si la torre es connecta per cable a la xarxa). Un exemple 
seria una càmera digital 0 un enregistrador de dades, controlable des 
del mòbil i amb unes fotografies i dades que volem descarregar 
després a l'ordinador de casa. 


7 Disponible a https://github.com/jorts64/hit-D1- 
mini/blob/master/projectes/2017-1820620TR/Xarxadetectora.pdf 
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Estació o AP2 


És interessant no canviar el ViFi.mode() si és possible. El nom de 
xarxa i la contrasenya s'emmagatzemen a la memòria RTC del 
ESP8266, de forma que no es perden amb un RST o apagat del 


IEACO1/J 


sistema . Sempre i quan no canviem el VViFl.mode(). Aquesta 


estratègia evita haver de guardar nosaltres aquestes dades. 


Utilitzar VVIFI AP és interessant en entorns hostils: tallers, 
conferències, demos, on de vegades l'accés a la xarxa és complicat. 
Penseu que els tipus de criptografia implementats són limitats. O les 
xarxes tenen limitada l'accés a IPs o ports no autoritzats. 


Però amb VVIFI AP no tindrem accés a internet, limitant l'ús de 
llibreries javascript ubicades al núvol o l'enviament de dades a 
servidors. En aquest cas ens interessa V/IFI STA, encara que sigui 
generant una xarxa amb el nostre mòbil. Per cert, si la xarxa a la que 
ens connectem no té contrasenya hem de posar 
MiFi.begin(ssid, "'): l 
Finalment, recordeu que també podem apagar la VViFI (i estalviar 
bateria) amb 

MiFi.mode(VIFI OFF), I 
Al meu projecte dCàmera tèrmicar" teniu un exemple de com 
engegar amb botons la VViFi, tant com V/VIFI AP com a VVIFL STA. 
Fixeu-vos en la funció initVíifi) al meu codi. 


8 Disponible a https://github.com/jorts64/it-D1- 
mini/tree/master/projectes/jorts/camera2020termica 
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ThingSpealt: enregistrar les nostres dades 
al núvol 


ThingSpeaR és un servei gratuit que ens permet publicar al núvol les 
nostres dades i visualitzar-les de forma gràfica. A més a més permet 
fer l'anàlisi amb la potència de MATLAB. 


Primer de tot crearem un compte a http://thingspeax.com i un canal 
on centralitzar les nostres mesures. Prenem nota del canal i del 
APIREY associat per escriure'n dades. 


Haurem d'instal lar la llibreria thinhspeah a l'Arduino IDE 


(https://github.com/mathvvorts/thingspeal-arduino). Ho podeu fer 
amb el gestor de llibreries de l'IDE. 


Podeu provar-lo amb el meu exemple thingspeat: 


Htinclude cESP8266MiFi.ho 

Hinclude "ThingSpear.h" 

Htinclude sINEMOS DHT12.hoò 

DH 12 dnti2. 

const char tssid - "Nom de la xarxa NiFi aqui", 

const char tpassmord - "Contrasenya de la NiFi aqui", 
NiFiClient client: 

unsigned long myChannelNumber — 135405, //canvia pel teu canal 
const char Y myUNriteAPIRey - "API Rey aqui", 

const int led - BUILTIN LED, // internal blue led 


void setup () 4 
pinMode ( led, OUTPUT ), 
digitalurite ( led, HIGH ), 
NiFi.begin ( ssid, passmord ), 
mhile ( NiFi.status() l- NL CONNECTED ) 4 
delay ( 500 ), 


) 
ThingSpeaR.begin(client), 
) 


void l0o0op () ( 
digitallrite ( led, LON ), 
citi ger Ore 
ThingSpeaR.mnriteField(myChannelNumber, 1, dhti2.cTemp, myUriteAPIRey), 
digitalrite ( led, HIGH ), 
delay(60000), // ThingSpeaR mill only accept updates every 15 seconds. 
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ee Tripler Base a C 


Piidiiia 


Quant tenim més d'una dada el mecanisme és lleugerament diferent. 
Primer preparem les dades i després les enviem de cop. Veieu el meu 
exemple thinspeal2c: 


Hinclude cESP8266MNiFi.ho 

Hinclude "ThingSpeaR.h" 

Hinclude sNEMOS DHT12.ho 

DHT12 dhti2, 

const char tssid - "Nom de la xarxa NiFi aqui", 

const char tpassmord - "Contrasenya de la NiFi aqui", 
MiFiClient client: 

unsigned long myChannelNumber € 185812, //Canvia pel teu canal 
const char Y myuriteAPIRey - "API Rey aqui", 

const int led S BUILTIN LED, // internal blue led 

int 


void setup () 4 
pinMode ( led, OUTPUT ), 
digitallrite ( led, HIGH ), 
NiFi.begin ( ssid, passuord ), 
mhile ( ViFi.status() IS VL CONNECTED ) 4 
delay ( 500 ), 


) 
ThingSpeaR.begin(client), 
) 


void l0o0p () 
digitalrite ( led, LON ), 
dhti2.get(), 
ThingSpeaR.setField(1,dhti2.cTemp), 
ThingSpeaR.setField(2,dhti2.humidity), 
ThingSpeaR.nriteFields (myChannelNumber, myNriteAPIRey), 
digitalrite ( led, HIGH ), 
delay (60000), // ThingSpeaR mill only accept updates every 15 seconds. 
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Part III. Utilitzant components externs 


Hem sacrificat una de les 3 columnes de la triple base per posar-hi 
connectors mascle. Ara veurem la seva utilitat. 


I2C: 
SCL 


o net. er MS SDA 
. v1.0.0 


o SE 
lo0) 


Les sortides no haurien de donar cap problema, però les entrades 
poden ser molt complicades si oblidem els pull-ups i pull-dovvns que 
porta la placa integrats, o el divisor de tensió integrat a l'entrada 
analògica i que pel meu gust es de massa baixa impedància. 


Recordeu que quan treballem amb components I2C cal que siguin 
alimentats a 3,3V. Si necessitem treballar amb un component I2C a 
5V, ens caldrà un adaptador de nivells pels senyals SCL i SDA. 
Connectar un component I2C de 5V sense aquest adaptador no 
només fa que la senyal no sigui fiable (el senyal de 3,3V de 
l'ESP8266 quedaria fora de les especificacions del bus I2C a 5V), a 
més a més podem fer malbé els components I2C que funcionen a 
8,8V. 


També recordeu que al bus I2C calen pull-ups a 3,3V a SCL i SDA. 
La majoria de shields i mòduls I2C porten aquests pull-ups integrats. 
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Per tant quan tenim un mòdul I2C farem les segúent connexions: 


Si treballem amb un component I2C i no estem segurs de la seva 
adreça, podem utilitzar el programa I2Cscanner, que en farà un llistat 
dels dispositius I2C trobats: 


Hinclude sNire.ho 
void setup() ( 
Nire.begin(), 
Serial.begin(9600), 
mhile (ISerial), // Leonardo: mait for serial monitor 
Serial.printin("inI2C Scanner"), 


) 


void l0o0p() ( 
byte error, address, 
int nDevices: 
Serial.printin("Scanning..."), 
nDevices - 0, 
for(address € 1, address € 127, addresstt ) 
( 
Nire.beginTransmission(address), 
error s Vire.endTransmission(), 
if (error ss 0) 
( 
Serial.print("I2C device found at address OX"), 
if (addressció) 

Serial.print("0"), 
Serial.print(address,HEX), 
Serialsprintin(t —l)5 
nDevicestt, 


else if (errorss4) 


Serial.print("UnRnonn error at address OX"), 
if (addresssció) 
Serial.print("0"), 
Serial.println(address,HEX), 
) 


if (nDevices ss 0) 
Serial.printin("No I2C devices foundin"), 
EC 
Serial.println("doneNn"), 
delay (5000), // mait 5 seconds for next scan 


94 


Part HI. Utilitzant components externs 


Mòdul 6 LEDs 


Ers tracta d'un mòdul molt econòmic i compacte, de 6 leds de 
diversos colors, cadascú amb la seva resistència de 1 XQ2 i que 
comparteixen negatiu. 


Tots els pins DO-D8 funcionen perfectament com a sortida. Això Si, 
donen 3,3 V en estat HIGH. Recordeu que l'ESP8266 funciona a 
aquest voltatge. 


Utilitzarem els cables Dupont femella-femella per connectar el 
mòdul. 


Tripler Base 


V4.8.8 
288214934 LL — 
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Veiem un programa senzill: 


oid setup() 
pinMode (D2, OUTPUT) , 
pinMode (D3, OUTPUT) , 
pinMode (D4, OUTPUT) , 
pinMode (D6, OUTPUT) , 
pinMode (D7, OUTPUT) , 
pinMode (D8, OUTPUT) , 

i 


void 100p() ( 
digitalNrite(D2,LON), 


digitalrite(D3, LOU), 
digitalNrite(D4,LON), 
digitallrite(D6, LOU), 
digitalNrite(D7,LON), 
digitalNrite(D8, LON), 
delay (1000), 

a 


Nrite(D2,HIGH): 
digitalurite(D3,HIGH): 
digitalurite(D4,HIGH): 
digitalurite(D6,HIGH): 


digitalurite(D7,HIGH): 


digitalurite(D8,HIGH): 


) 

No us ha d'estranyar que quan el led connectat a D4 estigui apagat 
s'encengui el led blau integrat a l'ESP8266. Recordeu que aquest led 
està polaritzat a l'inrevés. 
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Mòdul LED RGB 


Molt semblant al mòdul de 6 leds, cada entrada d'aquest led porta la 
seva resistència limitadora (270 G2 per verd i blau, 470 Q2 pel vermell) 
i comparteixen negatiu. 


Tots els pins D1-D8 permeten PVVM. Ho comprovem amb un senzill 
programa: 


void setup() 
pinMode (D6, OUTPUT), 
pinMode (D7,OUTPUT), 
pinMode (D8,0UTPUT), 
) 


void 1l00p() 
UE dei ES 
for (i0,i€256,17510) 4 
analogurite(D6,i), 
for (j50,j5256,jY510)4 
analogurite(D7,j), 
for (RSO, 625637510) 4 
analogurite(D8,R), 
delay(1), 
) 
) 
) 
) 
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Microservo 3,79 


Aquest servo, econòmic (no tant com el de 98, però ocupa menys a la 
capsa del Xit) ens mostra com utilitzar el connector estàndard de 
servo (S / 5V / GND) que hem creat a la triple base. 


Un dels avantatges dels servos és que agafen l'alimentació de forma 
independent. Per això el connector que hem fet té al mig 5V, encara 
que el microcontrolador ESP8266 funcioni a 3,3V. 


Fixeu-vos que el cable taronja (senyal de control) ha de quedar a 
V'esquerra. 


Podem provar-lo amb l'exemple de la llibreria servo específica pel 
ES8266. Caldrà canviar el pin per D6. 
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/ Sueep 
by BARRAGAN chttp://barraganstudio. como 
This example code is in the public domain. 


modified 28 May 2015 
by Michael C. Miller 
modified 8 Nov 2013 
by Scott Fitzgerald 


http://arduino.cc/en/Tutorial/Smeep 
eL 


Hinclude eServo.ho 
Servo myservo, // create servo object to control a servo 


// txelve servo objects can be created on most boards 


void setup() 
myservo.attach(D6), é// attaches the servo on GI02 to the servo object 


) 


void 1l00p() 
int pos, 


for (pos s O, pos ss 180, pos ts 1) 4( // goes from Q degrees to 180 degrees 
I in steps ot 1 degree 


myservo.urite(pos), // tell servo to go to position in variable 'pos' 
delay(15), // vaits 15ms for the servo to reach the position 
) 
for (pos s 180, pos 2-5 O, pos -s 1) 4( // goes from 180 degrees to O degrees 
myservo.murite(pos), ii tell servo to go to positien in variable "pos 
delay(15), // vaits 15ms for the servo to reach the position 
) 
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Mòdul 4 polsadors 


Mòdul compacte i econòmic, porta quatre polsadors que connecten a 
negatiu. 


Com D8 porta un pull-up a negatiu, millor no utilitzar aquest pin. 


D3 i D4 porten pull-ups a positiu. En principi els podem fer servir 
amb 


però no es recomanable fer servir aquestes entrades ja que si es fa un 
RST amb l'entrada a LOVV no s'inicia el programa. 


DO no porta pull-up intem configurable, per tant tampoc el farem 
servir. 


Finalment, D1, D2, D5, D6 i D7 permeten configurar un pull-up 


intern. Són les entrades que farem servir amb aquest mòdul amb les 
ordres 


Veiem un petit exemple que ens mostra l'estat de les entrades pel 
canal sèrie: 
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e dev/ttyUSBO ei. 


Desplaçament automàtic 


void setup() 
pinMode(D1, 
pinMode(D2, 
pinMode(D5, 
pinMode (D6, 


( 

INPUT. PULLUP), 
INPUT PULLUP), 
INPUT PULLUP), 
INPUT PULLUP), 


I 


Sense salts delnia 7 9600 baud i Clear output 


Serial.begin(9600), 


) 
void 100p() 


Seria prin (Di 1): 
if (digitalRead(D1)) 4 


Serial.print 
) 
else 4 

Serial, print 


) 


n("HIGH"), 


n("LON"), 


Serial.print("D2: "), 
if (digitalRead(D2)) 4 


Serial.print 
) 
else ( 
Serial,print 


) 


OD 'HIGH), 


n("LON"), 


Serial,print( "DS: "): 
if (digitalRead(D5)) 4 


Serial,.print 
L 
else ( 
Serial.print 


) 


n('HIGHT), 


n("LON"), 


Serial.print("D6: "), 
if (digitalRead(D6)) 4 


Serial, print 
) 
else ( 
Serial.print 


) 


n("HIGH"), 


n("LON"), 


Serial.printini(t--eeeeecesenenenenes 


delay (2000), 
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Mòdul potenciòmetre 


Aquest mòdul porta un potenciòmetre de 10 E Q2 que podem utilitzar 
com a divisor de tensió i llegir el seu valor amb l'entrada analògica 
AO. 


Les entrades analògiques són un problema en l'ESP8266. Només en 
tenim una, i internament treballa en el rang OV:1V. A la placa D1 
mini porta un divisor de tensió integrat per agafar 1/3 com a mostra 
de la tensió d'entrada, amb la qual cosa el rang passa a ser de OV : 
3,3V. El problema és que el divisor de tensió està fet amb resistències 
de valor molt petit pel meu gust: 100 RO2 i 220 RO), deixant una 
impedància d'entrada baixa. Si bé podem llegir valors de consigna 
amb aquest potenciòmetre, el fa inservible per a altres aplicacions, 
com ara la utilització de leds com a sensors de llum. 


Amb el meu exemple Analog2ViFi podem llegir el valor del 
potenciòmetre i comparar-lo amb un valor de referència, deforma que 
en superar-lo encengui el led integrat. A més a més, Si activem el 
polsador del shield 1-button genera una xarxa VViFi i mostra una 
senzilla gràfica de 400 lectures amb codi SVG": 


. ( Tripler Base N fa — 
(- hd h RP a 


a La T 
i 


2 
8: 
gu 
g'' 
I 
gr. 
8 
RN 

È 


9 Podeu conèixer més sobre el codi SVG (Scalable Vector Graphics) a HTML5 a 
https:/vyvv.ve3schools.com/html/htmil5 svg.as 
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dtinclude sESP8266MNiFi.ho 

Hinclude cNiFiClient.ho 

Hinclude cESP8266MebServer . ho 
const char tssid - "ESPap", 

const char tpassuord s "robotica", 
ESP8266ebServer server (80), 


void handleRoot() 4 
server.send(200, "text/html", "ehtmlo cheado e/heado sbodyo ca 
href-'graf.svg'oGraficas/axebrosa href-'rst'oResetes/axs/bodyos/htmlo"), 


) 


const int buttonPin - D3, 
const int ledPin - BUILTIN LED, 


void setup() 
delay(1000), 
pinMode (buttonPin, INPUT), 
pinMode(ledPin, OUTPUT), 
digitalurite(ledPin, HIGH), 
) 


void 1l00p() 
if (digitalRead(buttonPin)sscLON) 4 
prova(), 
) 
else ( 
if (analogRead(A0)2512) 4 
digitalNrite(ledPin, LOU), 
delay(100), 
digitalrite(ledPin, HIGH), 
delay(100), 
) 


) 
delay(1), 


void prova() 
digitallrite(ledPin, LOU), 
NiFi.sSoftAP(ssid, passmord), 
server.on("/", handleRoot), 
server.on("/graf.svg", grafica), 
server.on("/rst", reinicia), 
server.begin(), 
mhile (true) ( 

server.handleClient(), 

) 

) 


void grafica() ( 
String out — tTs 
char tempí10001, 
out ts "esvg xminssV "http: //unm.mn3.0rg/2000/svgv" versionsv"1.1N" 
midth-N"400N" height-v"150V"2Nn", 
out ts "crect midthsv"400N" heightsv"150V" fillsVzrgo (250, 230, 210)V" 
stroRe-midthsv"IN" stroRgesv"rgb(O, O, O)N" /oNn", 
out ts "€g stroResv"blacRV "an", 
int y —S analogRead(A0)/10, 
delay(5), 
for (int XS xos 399: xte)od 
int y2 - analogRead(A0)/10, 
delay(5), 
sprintf(temp, "sline xisNv"gdN" yisNv"GdN" x2sV"gdu" y2sV"gdN" stroRe- 
MidERSNTIX" fon", X, 140 - y, x t 10, 140 - y2): 
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Qi Fi. 9955 09:38 
7 192.168.4.1 O o 
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Mòdul sensor temperatura DS18B20 


Aquest sensor és molt interessant. De fet, un dels meus favorits. 
Dona la temperatura amb una precisió (£ 0,5 0C) i resolució (de 9 a 
12 bits) altíssimes en un rang molt ampli de temperatures ( de -55 .C 
a t85 OC). Essent digital fa servir només 3 fils (Vcc, GND i senyal) 
amb un bus propi on podem connectar diversos sensors. Com cada 
sensor porta gravat amb làser un codi únic de 64 bits a la seva ROM 
en teoria podríem connectar un nombre il:limitat de sensors al mateix 
pin. 


DATA 


GND 
(Bottom Vievv) NORMAL POVVER MODE 


Tots els pins D1-D8 tenen suport per a aquest bus OneVVire, però 
com el pin D8 porta un pull-dovvn no el podem fer servir per a aquest 
tipus de sensor. Per altre banda, el led integrat connectat a D4 ens pot 
donar problemes, així que millor no connectar-hi un DS18B20. 


Existeix un shield pel D1 mini amb aquest sensor (veure pàg. 127 ). 
Malauradament va connectat al pin D2, amb la qual cosa col-lisiona 
amb el bus I2C, i no porta un connector per afegir altres sensors 
externs. Per això el Rit porta un mòdul extern, que podem connectar a 
qualsevol dels pins D1, D2, D3, D5, D6 o D7 que tinguem lliure i 
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permet soldar un segon connector de 3 pins per connectar més 
sensors al mateix bus. 


Per utilitzar aquest sensor cal tenir les llibreries OneVíire i 
DallasTemperature, que podeu afegir amb el gestor de llibreries. 


A l'exemple DS18B20 AJAX utilitzem aquest sensor per mostrar 
via vveb la temperatura cada segon: 


Hinclude cESP8266MNiFi. ho 
Hinclude cNiFiClient.ho 
Hinclude cESP8266MebServer . ho 
Hinclude sOneNire.hoò 

Hinclude sDallasTemperature.ho 


const char tssid - "nom de la Xarxa", 
const char tpassmord €s "contrasenya", 


ESP8266ebServer server ( 80 ): 

Hdefine ONE NIRE BUS D7 // DS18B20 pin 
OneVire onelire(ONE VIRE BUS), 
DallasTemperature DS18B20(80nelire), 
mMoat t: 


const char tpagina € "chtmbxA 

cheadoN 
cmeta http-equiv-'Content-Type' contents'text/html, charsetsUTF-8'2N 
emeta names'viemport' contents 'midthsdevice-midth'o X 
StitlesAJAX Tests/titlesy 
estylexbody(padding:0,margin:0,bacRground:A999)e/stylex 
escriptoN 

function loadTemp() (N 
var xhttp - nem XMLHttpRequest():N 
var temp - ON 
xhttp.open('GET', 'ajax info.txt', false)jX 
xhttp.send()jN 
temp - parseFloat(xhttp.responseText):y 
return (temp):iN 

PX 
e/scriptol 

e/headoN 

cbodyoN 

cpo Temperatura: s/poN 

cp ids'demo'xe/poN 

escriptoAN 

var myVar - setInterval(myTimer, 1000)3X 

function myTimer() N 
document. getElementById('demo').innerHTML - loadTemp():X 

DI 

e/scriptol 

c/bodyoN 

e/htmlo", 


void handleRoot() í 


server.send ( 200, "text/html", pagina ), 
) 


void handleNotFound() 
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String message - "File Not Foundinin", 
message ts "URI: ", 

message ts server.uri(), 

message ts "NnMethod: ", 


message ts ( server.method() s- HTTP GET ) 2 "GET" : "POST", 
message t- "NnArguments: ", 
message ts server.args(), 
message ts "Nn", 
for ( uint8 t i s 0, i € server.args(), itt ) ( 
message ts " " t- server.argName ( i ) t ": " t server.arg ( i ) t "Vn", 
j 
server.send ( 404, "text/plain", message ), 


i 


void handleAjax()í 
DS18B20. requestTemperatures(), 
t S DS18B20.getTempCByIndex (0), 
Serial.print("Temperature: "), 
Serial.printin(t), 
String out - String(t), 
server.send ( 200, "text/txt", Out), 
) 


void setup ( void ) 4 

Serial.begin ( 115200 ), 
NiFi.begin ( ssid, passmord ), 
DS18B20.begin(), 
Serial,printin ( VT ): 
mhile ( NiFi.status() l- NL CONNECTED ) 4 

delay ( 500 ), 

Seria, prim (st je 
) 
Seria, printin (St )s 
Serial.print ( "Connected to " ), 
Serial.printin ( ssid ), 
Serial.print ( "IP address: " ), 
Serial.printin ( NiFi.localIP() ), 
server.on ( "/", handleRoot ), 
server.on ("/ajax info.txt", handleAjax ), 
server.onNotFound ( handleNotFound ), 
server.begin(), 
Serial.printin ( "HTTP server started" ), 

) 


void loop ( void ) 4 
server.handleClient(), 


) 
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l B AJAXTest xi Nh aa Da 


€ 3 C DOQ Noseguri 192168.137 XX XI: 


i Aplicacions (m tecno (m importat de Fir vn l Em Altres adreces d'interès 


Fixeu-vos com amb AJAXY podem actualitzar una pàgina vveb 
minimitzant el trànsit de dades. A la part HTMLS bàsicament ens cal 
una funció javascript per agafar les dades (load'lemp() en el nostre 
cas) i trucar-la periòdicament" per actualitzar la pàgina (funció 
myTimer() activada per setInterval(myTimer, temps en ms)). 


Al codi Arduino ens cal una funció (handleAjax() en el nostre cas) 
que llegeixi la temperatura i la lliuri en el format adequat, activada 
quan demanem una pàgina en concret (ajax info.txt en el nostre cas). 


10 Podeu trobar més informació sobre com utilitzar AJAX al vostre codi 
javascript a https: /vvvvv.vr3schools.com/is/js ajax intro.as 

11 Podeu trobar més informació sobre setInterval() i els seus paràmetres a 
https: ve. ve3schools.com/isref/met vvin setinterval.as 
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Mòdul sensor de llum I2C BH1750FVI 


Aquest sensor pot treballar amb 3,3V. També està disponible com a 
shield del D1 mini. 


El principal avantatge d'aquest sensor és que ens dona la llum 
directament en lux. La precisió (que pot arribar a ser de £ 0,5 IX) 
depèn del mode d'operació, i repercuteix en el temps de mesura. 
L'exemple BH1750 utilitza el mode d'alta resolució continu, amb un 
temps de mesura de 120 ms i una precisió de £ 1 IX: 


//Install Iclams/BH1750 Libraryl(https://github.com/clamns/BH1750) first. 
Hinclude sMire.ho 

Hinclude €BH1750.hoò 

BH1750 lightMeter(0x23), 


void setup()( 
Serial.begin(9600), 
Nire.begin(), 
if (lightMeter.begin(BH1750::CONTINUOUS HIGH RES MODE)) 4 
Serial.printin(F("BH1750 Advanced begin")), 
) 
else 4 
Serial.printin(F ("Error initialising BH1750")), 
) 
) 


void 100p() 
uinti6 t lux - lightMeter.readLightLevel(), 
Seria, primtcliients ns 
Serial.print(lux), 
Serdal. primitius xi )s 


delay(1000), 
Dl v 


Las 
a 
La 
ro 
4 
f 
Es 
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Mòdul acceleròmetre - giroscopi I2C 
GY-521 


Aquest mòdul I2C, que pot treballar a 3,3V i és molt econòmic, ens 
dona la temperatura i les acceleracions lineals i angulars segons els 
tres eixos X, Y i Z. 


A l'exemple GY-521 utilitzarem el plotter sèrie per visualitzar els 
canvis en aquests valors: 


ec) GY-521 l Arduino 1.8.5 —-Ox 


Eitxer Edita Esbós 


Format automàtic CtrleT 
Arxiva el programari 

Arregla la codificació i recarrega 

fincludedi re .hx Monitor sèrie 
const int MPU ad Plotter sirie 


intl6 t ACX,ACY gana € 
data setupl 4 VVIFi101 Firmvvare Updater 


ire.begin(): J ESP32 Shetch Data Upload 
vi re .beginl ran ESP8266 SRetch Data Upload 


Mire.vrite(0x6 

Mirevrite(O):j Tarja: "LOLINVEMOS) D1 R2 8. mini" , 
Mire.endT ransmi Flash Size: "4M (2M SPIFFS)" , 
Serial .begin(9 Debug port: "Disabled" 

Debug Level: "Cap" 

Viro.beginT ral lvViP saidcte L Lovver Memory 

Mi re vrite(6x3 VIEDlES: Flash 


h 
h 
h 
h 
Mi re .endT ransm) CPU Frequency: "80 MHz" , 
h 
h 
h 


Ctrla ShiftarM 
Ctrle ShifteL 


) 
void l00p()Í 


Mire.requestF 4 Upload Speed: "921600" 
AcXsi re . read(l Erase Flash: "Only SRetch" 


AcYi re. readll Port: "/dev/ttyUSBO" 
AcZ-ire.readí( 
Tmp-ire.readí 
GyX-ire.read(l Programador: "AVRISP mRll" , 
GyYSulire.readi(l Carrega Bootloader 


Informació de la placa 
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EJ dev/ttyUSBO —Ox 
40000. 0 mEnETnnS 


20000, O 


-20000, O 


- 40000, O 
le) 


100 200 


Hincludesvire.ho 
const int MPU addr-0x68, // I2C address of the MPU-6050 
inti6 t ACX,ACcY,AcZ,Tmp,GyX,GyY,GyZ, 
void setup()4 
MNire.begin(), 
Nire.beginTransmission(MPU addr), 
Vire,urite(Ox6B), / PNR MGMT 1 register 
Vire.urite(0), // set to zero (naíes up the MPU-6050) 
Mire.endTransmission(true), 
Serial.begin(9600), 


) 

void 100p()( 
Nire.beginTransmission(MPU addr), 
Mire.urite(Ox3B), // starting mith register Ox3B (ACCEL XOUT H) 
Nire.endTransmission(false), 
Nire.requestFrom(MPU addr,14,true), // request a total of 14 registers 
AcXsVire.read()es8lNire.read(), é// Ox3B (ACCEL XOUT H) 8. Ox3C (ACCEL XOUT L) 
AcYsVire.read()es8lNire.read(), é// Ox3D (ACCEL YOUT H) 8c Ox3E (ACCEL YOUT L) 
AcZ-Nire.read()es8lNire.read(), é// Ox3F (ACCEL ZOUT H) 8. 0x40 (ACCEL ZOUT L) 
Tmpsvire.read()es8juire.read(), // 0x41 (TEMP OUT H) 8 Ox42 (TEMP OUT L) 
GyXeNire.read()es8jNire.read(), —// 0x43 (GYRO XOUT H) 8: Ox44 (GYRO XOUT L) 
GyY-Nire.read()es8jNire.read(), // 0x45 (GYRO YOUT H) 8: Ox46 (GYRO YOUT L) 
GyZ-Vire.read()es8lNire.read(), // 0x47 (GYRO ZOUT H) 80 Ox48 (GYRO ZOUT L) 
Setial. print(Aci): Serial primti", i. 
Serial,primt(AcY): Serial,printi",) 
Serial,prinmt(Aci): Serial.primti", i 
Serial.prinmt(Gyi): Serial primti", i 
Serial, printiGyy): Serial print(", Ne 
Serial.prinmt(GyZ): Serial.printi",") 
Serial.printin(Tmp/340.00136.53), / 

from datasheet 
delay(333), 


/equation for temperature in degrees C 


Fixeu-vos que en aquest cas no he fet servir cap llibreria, sinó 
comandes I2C pures per llegir els registres del dispositiu. En realitat, 
les llibreries de components I2C el que fan es facilitar aquestes 


Fa 


IoT amb D1 mini (ESP8266) i codi Arduino 


comandes sota el nom d'una funció. El cor d'aquest mòdul, el 
MPUG050, té 118 registresi 


Però existeix una llibreria per a aquest mòdul. Es diu MPUG6050, per 


si voleu provar-la. 
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Arduino Pro mini com a esclau I2C 


Com heu vist les dues limitacions més importants de l'ESP8266 són 
V'existència de només una entrada analògica (i, a més a més, de petita 
impedància) i el reduit nombre d'entrades digitals disponibles 
(especialment si fem servir el bus I2C). 


Per això al it trobareu un arduino pro mini a 8 MHz i 3,3 V 
configurat com a esclau I2C. Amb això afegim 6 entrades 
analògiques (d'alta impedància) i 12 ports I/O. 


5V GND AO- A3 — D10-D13 
RALRRIL LL Ana h. 


MYUONO 1SY S LV QV .ae. eL Z OL 


Aquest mòdul funciona a 3,3 V, que pot generar amb un regulador de 
tensió propi. Per això el connectarem als 5 V de la placa triple 
(d'aquesta manera repartim el consum a 3,3 V entre els reguladors 
del D1 mini i del arduino pro mini). 


He preparat una llibreria (I2CsapmR1) per utilitzar fàcilment aquest 


dispositiu. La trobareu a (https://github.com/jorts64/I2CsapmR1). 
Veiem l'exemple simple que incorpora: 
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Hinclude "I2CsapmR1.h" 
Hinclude sUire.hoò 


I2CsapmR1 SAPM(2), 


void setup() 4 


) 


Serial.begin(9600), 

SAPM.begin(), 

SAPM.urite(I2CsapmR1 M2,0UTPUT), 
SAPM.urite(I2CsapmR1 M3,INPUT PULLUP), 


void 100p() (4 


) 


SAPM.urite(I2CsapmR1 D2,HIGH), 

int sensorValue - SAPM.read(I2CsapmR1 A0), 
int digValue - SAPM.read(I2CsapmRi D3), 
Serial.print(sensorValue), 

Serial.print(" 4 Dis 
Serial.println(digValue), 

delay(100), 

SAPM.urite(I2CsapmRi D2,LON), 

delay(100), 


Si connectem un led al pin 2 de l'arduino pro mini veurem que fa 
pampallugues'": 


UEHO8, CC 


i 0/0 6 6 9) ft 
i OJO Q Q QI8 


12 Encara que aquest exemple no fa servir el display OLED l'he posat per tenir al 


menys un dispositiu I2C al bus que posi els seus pull-ups a SCL i SDA. 
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Si ara connectem el potenciòmetre a l'entrada AO de l'arduino pro 
mini i obrim el monitor sèrie llegirem el seu valor (primer nombre de 
cada línia): 


dev/ttyUSBO 


/ O 
Lc) 
/ 0 
/ O0 
Lc) 
/ 8 
/ 80 
/ 0 
/ 80 
/ 0 
/ OO 
/ 0 
/ 80 
/ 0 
/ 0 


Desplaçament automàtic Sense salts de línia El 9600 baud HI Clear outpu 


Ara connectem un polsador a l'entrada 3 de l'arduino pro mini i 
obrim el monitor sèrie. Veurem els canvis a l'entrada (segon nombre 
de cada línia): 
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d 


Desplaçament automàtic Sense salts de línia i 9600 baud ls Clear outpu 


Analitzem una mica el codi: 


Al setup() hem configurat les entrades digitals tal com ho fariem amb 
pinMode(): 


SAPM.urite(I2CsapmR1 M2,0UTPUT), 
SAPM.urite(I2CsapmR1 M3,INPUT PULLUP), 
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Al loop hem llegit les entrades digitals i analògiques i canviat les 
sortides digitals accedint al seu registre: 


Com els registres són consecutius podem utilitzar bucles per 
configurar o accedir a un conjunt de pins: 


L'avantatge d'aquest dispositiu és el seu preu, molt econòmic, i la 


seva flexibilitat. Alterant el firmvvare" podem utilitzar-lo com a una 
navalla suissa per a qualsevol aplicació: 


e — sortides amb pvvm 

e — control de servos 

e — control de motors pas a pas 
e — lectura d'encoders rotatoris 
e — lectura de teclats matricials 


A més a més en podem tenir tants arduino pro mini al bus I2C com 
vulguem. Només cal canviar l'adreça I2C dels dispositius al seu 
firmyvare. 


13 Veure Annex 8: Firmvvare de l'arduino pro mini 
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Part IV. El sistema de fitxers SPIFFS. 
Utilització a un servidor vveb. 


Una de les joies de l'ESP8266 és el seu sistema de fitxers SPIFFS, 
que simula una SD. Com l'arduino IDE només aprofita 1 MB de 
memòria i el nostre D1 mini en té 4 MB de flash, podem dedicar 
algun MB a aquesta SD virtual. 


Per utilitzar aquesta opció cal escollir a l'IDE la mida de la SD 
virtual. Encara que podríem dedicar els 3 MB restants, jo prefereixo 
2 MB, reservant 1 MB per l'actualització VViFi del programa 
(OTA)". 


o shetch dec31a j Arduino 1.8.5 —Ox 

Eitxer Edita Esbós Ajuda 

Format automàtic Ctrl4T 

Arxiva el programari 

Arregla la codificació irecarrega 

void setup() ( Il Monitor sèrie Ctrle Shifte M 
put your S€l Plotter sèrie CtrlaShifteL. 

) VMIFi101 Firmvvare Updater 


ESP32 Shetch Data Upload 
void had. ) t ESP8266 Shetch Data Upload 
PAE VOS "Taga: "LOLINQUEMOS) DA R2 8 mini" 
) Flash Size: "4M (2M SPIFFS)" 
Debug port: "Disabled" 
Debug Level: "Cap" 
lvviP Variant: "v2 Lovver Memory" 
VTables: "Flash" 
CPU Frequençy: "80 MHz" 
Upload Speed: "921600" 
Erase Flash: "Only Shetch" 
Port 
Informació de la placa 
Programador: "AVRISP mhll" , 
Carrega Bootloader 


stetch dec3la 


4M (1M SPIFFS) 


e 4M (2M SPIFFR) 
4M (3M SPIFFS) 


ve vv dx x EE 


Aemory, Disabled, None, Only Set: 


Cal crear a la carpeta del programa una subcarpeta amb el nom data, 
on posarem els fitxers amb que volem carregar inicialment la SD 
virtual. La imatge d'aquesta SD virtual l'enviarem al nostre D1 mini 


14 Veure Part IX. Actualització VViFi del programa (OTA) 
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amb l'opció ESP8266 SXetch Data Upload", que haurem d'utilitzar 
amb el monitor sèrie tancat (si el tenim obert tindrem problemes per 
connectar-nos al D1 mini poer enviar aquesta imatge de la SD). 


Al programa cal posar la línia 

Hinclude eFS.ho 

Us pot semblar que 2 MB són molt poc, especialment tenint en 
compte la capacitat de les SDs actuals, però al llarg d'aquest capítol 
veureu que en podem treure un bon profit d'aquests 2 MB. 


15 Cal instal-lar de forma separada aquesta eina. Veure Annex 5: Instal-lació 
Arduino per a ESP8266. 
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Afegint fitxers al nostre servidor vveb. La 
funció serveStatic(). 


De vegades l'únic que ens interessa es poder tenir fitxers a la nostra 
SD virtual amb els quals millorar l'aspecte de les pàgines vvebs 
generades: imatges, codi javascript o estils css, manuals en PDF. ... 


La funció serveStatic() fa justament això: quan es demana un fitxer al 
servidor vveb que comença amb un cert patró el busca a la SD virtual 
i l'envia directament. Així de simple. 


Veiem el meu exemple serveStatic: 


Hinclude cESP8266MiFi.ho 
Hinclude cNiFiClient.ho 
Hinclude cESP8266MebServer . ho 
Hinclude €FS.ho 


const char tssid - "Nom de la Xarxa", 
const char tpassmord €s "contrasenya", 


ESP8266ebServer server ( 80 ): 


void handleRoot() í 
char tempií400/J, 
int sec —S millis() / 1000, 
int min € sec / 60, 
int hr s min / 60, 
snprintf ( temp, 400, 
"ehtmloN 
cheadoN 
cmeta http-equivs'refresh' contents'5'/2N 
ctitlezESP8266 Demos/ title 
estyle 
body ( baciground-color: Hcccccc, font-family: Arial, Helvetica, Sans- 
Serif, Color: 8000088, JN 
e/style 
c/headoN 
cbodyoN 
chioBenvinguts al mgoacute,n IoTS/h2N 
cpoUptime: 302d:902d:802de/ po N 
cimg srcs'/img/IoT. jpg 
c/bodyoN 
e/htmlo", 
hr, min 8 60, sec 3 60 
JE 
server.send ( 200, "text/html", temp ), 
) 


void handleNotFound() 4 
String message - "File Not Foundinin", 
message ts "URI: ", 
message ts server.uri(), 
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message ts "NnMethod: ", 
message ts ( server.method() s- HTTP GET ) 2 "GET" : "POST", 
message ts "NnArguments: ", 
message ts server.args(), 
message ts "Vn", 
for ( uint8 t i s 0, i 8 server.args(), itt ) ( 
message ts " " t- server.argName ( i ) t ": " t server.arg ( i ) £- "Mn", 
) 
server.send ( 404, "text/plain", message ), 


) 


void setup ( void ) 4 
Serial.begin(9600), 
NiFi.begin ( ssid, passuvord ), 
SPIFFS.begin(), 
mhile ( NiFi.status() l- NL CONNECTED ) 4 

delay ( 500 ), 

) 
Serialsprintim ( ST o): 
Serial.print ( "Connected to " ), 
Serial.printin ( ssid ), 
Serial.print ( "IP address: " ), 
Serial.printin ( NiFi.localIP() ), 
server.on ( "/", handleRoot ), 
server.serveStatic("/img", SPIFFS, "/img"), // imatges dir 
server.onNotFound ( handleNotFound ), 
server.begin(), 
Serial.printin ( "HTTP server started" ), 


) 


void loop ( void ) 4 
server.handleClient(), 


DO ESP8266 Demo el de Ex 
€ 3 Cl Q Q Nosegur/ 192.168.1.37 xd —-— XI: 
i Aplicacions (m tecno (nm importat de Fir v l Em Altres adreces d'interès 


Benvinguts al món IoT 


Uptime: 00:02:27 


Com podreu suposar analitzant el codi a la carpeta data he creat una 
subcarpeta img on he posat una fotografia amb el nom IoT:jpg (que 
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millor fotografia que una amb la meva filla Ingrid visitant la 
IOTSV/C16 el passat 17 d'octubrel). 


Amb la línia 


rveStatic("/img", SPIFFS, "/img") // imatges dir 


fem tota la màgia. Ara quan el servidor rep una petició d'un fitxer 
que comença per img el busca a la carpeta img de la SD virtual i 
l'envia directament. 
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Enregistrar dades a la SD virtual i poder 
recuperar-les via VViFi. Generació de fitxers 
compatibles amb fulls de càlcul 

Aquesta es una tasca molt comú: un datalogger. Si emmagatzemem 


les dades a la SD en un fitxer CSV després el podrem recuperar 
mitjançant el servidor vveb i obrir-lo amb qualsevol paquet ofimàtic/". 


Veiem el meu exemple datalogger que utilitza el DHT shield per 


mesurar la temperatura: 


U4.0.8. 


Tripler Base e ce 


boc 0000: 


, 00: 0800, 


AARARAR: 


Hinclude cESP8266NiFi.ho 
Hinclude cNiFiClient.ho 
Hinclude cESP8266MebServer . ho 
Hinclude €FS.ho 

Hfinclude sEMOS DHT12. ho 


DHT12 dhti2: 
ESP82664ebServer server ( 80 ): 
unsigned long ara, 


const char tssid - "jortsnet", 
const char tpassmord - "9periodico", 


void espera (int n) 4 


16 Si voleu un anàlisi més profund de les dades us recomano el programari 
QtiPlot, disponible com a GPLV2 a https://sourceforge.net/projects/atiplot.berlios/ 


83 


IoT amb D1 mini (ESP8266) i codi Arduino 


mhile (millis()caratn) 4 
delay(1), 
server.handleClient(), 

) 

i 


void setup() 
Serial.begin(9600), 
SPIFFS.begin(), 
NiFi.begin ( ssid, passuord ), 
mhile ( NiFi.status() l- NL CONNECTED ) 4 
delay ( 500 ), 
) 
Serial,printin ( "" ): 
Serial.print ( "Connected to " ), 
Serial.printin ( ssid ), 
Serial.print ( "IP address: " ), 
Serial.printin ( NiFi.localIP() ), 
server.serveStatic("/dades", SPIFFS, "/dades"), // gauge files dir 
serversbegin(), 
SPIFFS.remove ("/dades/dati.csv"), 
i 
void 100p() 4 
File f - SPIFFS.open("/dades/datl.csv","a"), 
for(int is1, ic5100, ift)( 
ara S millis(), 
if(dhti2.get()--0)4 
f.print(ara/1000), 
frame, 91: 
f.println(dhti2.cTemp), 
espera(1000), 
) 


) 
f.close(), 
) 


Fixeu-vos al programa com fem servir la funció f.printÓ per desar les 
dades a la SD virtual i com el serveStatic() ens permet accedir a elles 
via VViFi. 

Una vegada enregistrades les dades podem baixar el fitxer amb un 
navegador apuntant a http://192.168.1.37/dades/datl.csv (en el meu 
cas va agafar la IP 192.168.1.37). 


Quan obrim el fitxer recomano triar idioma anglès (EUA) per 
interpretar correctament el separador decimal: 
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ni x 
Importa 
Jocdecaràcters: Unicode (UTF-8) j : 
Llengua: anglès (EUA) - Li 
Des de la fila: Ú 3 
Opcions del separador 
O Amplada fixa Q Separat per 
H Tabulació x Coma 1 Punt i coma Espai Altre 
Fusiona els delimitadors Delimitador de text: H dd 
Altres opcions 
Camp entre cometes com a text Detecta els nombres especials 
Camps 
Tipus de columna: È 


Ajuda Cancel.la 


Il ja podem treballar amb les dades: 


E dat1.csv - LibreOffice Calc —Ox 


Fitxer Edita Visualitza Insereix Format Full Dades Eines Finestra Ajuda 


D'EBRE SD AS CER SU UR QS 88 O H CEE 


Liberation Sans fo NCS A G-is 


lEs 


T 


EU Ba 86 00 (88 BI SE EO 


M11 dsas-l 
JA Cr ja Dn) 


ATBJ a JA A TT I ploma amesió ra 
1 H 266 
2 l 12 265 
3.01 13 265 295 
4) 14 265 29 
sol 15 265 
6 l 16 265 285 
Tl 25 
8 l 18 266 sl 
9 i 19 268 15 
10) 20 271 E) 
ET 21 274 ió 
12 l 22 276 — era 
13) 23 27.7 265 
14) 24 277 26 
154) 25 277 Rh 
161. 26 27.7 255 
171 27 276 
18) 28 276 5 
91 2215 LJ 00 80— 100 120 
201 30 27,4 te) 
Ral nal aa 
ECXICIICIÓ pe 
Full1 de 1 i Per defecte Í imfGi 4 SumazO — ——o—— 4 Í 10096 
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Llegint dades de la SD virtual 


La SD virtual és el lloc ideal per desar dades com ara definicions de 
bitmaps o fragments de pàgines vveb. El problema és interpretar 
correctament aquestes dades. 


El meu exemple bitmapSPIFFS carreguem la definició d'un bitmap 
per a la pantalla OLED. Com aquest l'hem obtingut mitjançant l'eina 
image2cpp" la tenim en un array amb valor hexadecimals. Caldrà 
trobar cada element de la matriu i convertir el format de text 
hexadecimal: 


Hinclude sNire.ho 
Hinclude eSFE MicroOLED.ho 
Hinclude €FS.ho 


èdefine PIN RESET 255 // 

èdefine DC JUMPER O // I2C Addres: Q - 0x3C, 1 - Ox3D 
MicroOLED oled(PIN RESET, DC JUMPER), // I2C Example 
EE die: 

uint8 t pixels(16724J, 


void setup() 


SPIFFS.begin(), 
GL Ed BEL dm) S 
oled.clear (ALL), 
oled.display(), 
delay(1000), 
oled.clear(PAGE), 
loadbitmap(), 
oled.dramBitmapí(pixels), 
oled.display(), 

) 


void 100p() 
) 


String getLine() 4 
String ss  $ 
char c - f.read(), 
nmhile ( c IS 'Nn') 4 
SS IC 
€ f.read(), 


return(S) 5, 


) 


int convertFromHex(int ascii)f 
if(ascii 2 0x39) ascii -s 7, // adjust for hex letters upper or lomer case 


17 Disponible a http://javi.github.io/image2cpp/. Recordeu fer servir la 
codificació vertical i una mida de 64 x 48 px. 
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return(ascii 8c OXf), 


) 


void loadbitmap()( 
uint8 t sal161, 
SErinE txEs Ut, de qls ES 
f s SPIFFS.open("/bitmap.dat","r"), 
for (isO0,i824,Çi74)4Ç 
txt-getLine(), 


RO, 

tor (70: q5167 jdt) 4 
mhile (txt.charAt(R) IS 'X') RT, 
saljl € convertFromHex(txtiRtil)"16, 
saljl ts convertFromHex(txtiRet2l), 
leteel 

) 


Bon (ros) 4 
pixelsl(iti6tjlssaljl: 
) 
) 


fe close): 


) 
I al fitxer bitmap.dat tenim les dades: 


0X00, Ex00, PX00, PX00, EX00, PX0O, PX00, EX0O, PX0O, PX0O, Ex0O, PX0O, OX0O, PX0O, PX00, OX00, 
0Xx00, EX00, PX00, PX00, EX00, PX0O, PX0O, EX0O, PX0O, PX00, EXFO, PXFO, OXFO, OxFO, EXFO, OXFO, 
OxFO, EXF8, 0X78, OXTC, EX1C, OX1C, Ox1E, EX0E, PXPC, Ox1C, ExFO, EXEO, Ox80, EX00, EX0O, OX00, 
0x00, EX00, PX0O, PX00, EX00, PX0O, PX0O, EX0O, PX0O, PX0O, PX0O, PXPO, PXPO, Px0O, PX0O, OX00, 
0X00, EX00, PX00, PX00, EX0O, PX0O, PX0O, EX00, PX0O, PXCO, EXPO, PX0O, OXPO, PX0O, PX0O, OX00, 
0x00, EX00, PX00, PX00, EX00, OX80, OXEO, OXFO, OXFC, OXFC, EXTF, Ox3F, Ox1F, OxFF, EXFF, OXFF, 
OxFF, EXEB, 0X00, 0X00, EX00, PX00, PX00, EX00, PXCO, OXFO, OXTF, EX1F, 0x03, EX00, PX00, OX00, 
0X00, EX00, PX00, PX00, EX00, PX0O, PX00, EXPO, PX0O, PXPO, EX0O, PXPO, OXPO, Px0O, PX0O, OX00, 
0x00, EX00, PX00, PX00, EX00, PX0O, PX00, EX00, PX0O, PXPO, EX0O, PX0O, OXPO, PX0O, PX0O, OX00, 
0x00, EX00, PXCO, OXFC, EXFF, OXFF, OXFF, ExFF, 0X9F, 003, EX00, PX00, OX00, Ex00, OXFF, OXFF, 
OxFF, EXFF, 0xC6, OXE4, ExFO, OXF8, OxDE, EXOF, 0X03, OxO1, Ex00, EX8O, OX80, Ex80, PX00, OX00, 
0Xx00, EX00, PX00, PX00, EX00, PXPO, PX00, EX0O, PX0O, PXPO, EX0O, PXPO, PXPO, PXx0O, PX0O, OX00, 
0x00, EX00, PX00, PX00, EX0O, PX0O, PX0O, EX00, PX0O, PXCO, EX0O, PX0O, OXPO, PX0O, PX0O, OX00, 
0x00, EX00, PX03, Ox01, EX00, 0X02, Ox1F, OXx3F, 0x70, 0x58, Ex30, 0x30, 0x18, 0x38, EXFF, OXFF, 
OxFF, EXFF, 0x07, 0x06, Ex02, 0X80, OXFO, EXFO, OXFC, OXTE, ExiF, PX07, Ox03, EX00, PX00, OX00, 
0X00, EX00, PX00, PX00, EX0O, PXPO, PX0O, EX0O, PX0O, PXPO, PX0O, PXPO, OXPO, PX0O, PX0O, OX00, 
0X00, EX00, PX00, PX00, EX0O, PX0O, OX0O, EX00, PX0O, PX0O, EX0O, PX0O, OXPO, PX0O, PX00, OX00, 
0Xx00, EX00, PX00, PX00, EX00, PXPO, PXPO, EX0O, PX0O, PXPO, EX0O, PXPO, OX00, Ex00, OXFF, OXFF, 
OxFF, OXFF, OXF1, OXFC, ExFF, OXFF, Ox3F, Ex07, 0X03, OX00, EX0P, PX0O, PXPP, PX00, PX0O, OX00, 
0Xx00, EX00, PX00, PX00, EX00, PXPO, PX0O, EXPO, PX0O, PXPO, EX0O, PXPO, OX0O, PXx0O, PX0O, OX00, 
0X00, EX00, PX00, PX00, EX00, PX0O, PX0O, EX0O, PX0O, PXCO, PX0O, PX0O, OXPO, PX0O, PX0O, OX00, 
0x00, Ex00, PX80, OX30, EX00, PX0O, PXPO, EX00, PX0O, PXPO, EX0O, PXPO, OX00, Ex00, OXCF, OXFF, 
OxFE, EXFF, OXFF, OXxBF, ExCF, 0X03, 0X00, EX00, PX0O, PXP, EX0P, PX0O, PXPP, PX00, PX00, OX00, 
0X00, EX00, PX00, PXPP, EX0O, PXPO, PXPO, PXPP, PXPO, OX0O, PXP, EXPO, OX0O, Px00, EX00, OX00O 


) Tripler Base ma) 


MEMOS.CC 


7: 


h) 


ia 
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IoT amb D1 mini (ESP8266) i codi Arduino 


FSManager, la navalla suissa per a la 
gestió de fitxers a la SD virtual via VViFi 


Ja haureu vist que carregar la imatge de la SD virtual és lent. 
Especialment si estem modificant arxius d'estil CSS o pàgines 
HTML i codi javascript per millorar l'aspecte de la nostra interfície 
vveb. 


El meu exemple FSManager es pot utilitzar com a una plantilla per 
als vostres programes. Es fàcil d'adaptar i millorar, i permet enviar, 
crear, editar, veure, baixar i esborrar tot tipus de fitxers. Això si, està 
limitat a gestionar un sol directori, que per defecte és V'arrel. 


A més a més facilita la connexió VViFi i pot treballar tant en mode AP 
com STA. Només cal canviar el nom de xarxa i contrasenya, així 
com el tipus de connexió, si s'escau. No utilitza fitxers externs ni 
llibreries al núvol". 


DH Gestió de fitxersr xi - OO x 
€ C OO Nosegur/ 192.168.1.37/dir DO, 
Hi: Aplicacions (m tecno nm importat de Fir x l Em Altres adreces d'interès 


Gestió de fitxers SD virtual 


nota.txt lTBS — X 

index.htm 2.75SRB 9 —£— X N 
graphs.js S.76RB SD — Xx 
JORTS-CON-J4.jpg 94.75RB DS — x 
favicon.ico 14.70RB S — X 


Fitxer nou: Crea 


Fitxer a enviar: / Tria un fitxer / No s'ha triat cap fitxer Envia 


18 El codi de FSManager ha evolucionat al llarg de la redacció d'aquest llibre, 
afegint noves prestacions. Trobareu la versió més completa i potent a Annex 9: 
Afegint la funcionalitat de FSManager als nostres projectes 
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Part IV. El sistema de fitxers SPIFES. Utilització a un servidor vveb. 


Hinclude cESP8266NiFi.ho 
Hinclude cNiFiClient.ho 
Hinclude cESP8266MebServer . ho 
Hinclude €FS.hoò 


ddefine DBG OUTPUT PORT Serial 


const chart ssid -s "esp8266AP", 

const chart passuord € "robotica", 

const chart host -s "esp8266fs", 

fl tria el tipus de connexió. Client MIFI STA, Access Point NIFI AP 
ddefine MODE VIFI NIFI AP 


ESP8266ebServer server (80), 
File fsUploadFile, 


// Helper functions prototypes 
void ORRetorn(), 
void printDirectory (0), 
void handleFileCreate(), 
void handleFileDelete(), 
void handleFileUpload(), 
String formatBytes(size t bytes), 
String getContentType(String filename), 
bool handleFileRead(String path), 
void handleFileEdit(), 
void handleFileSave(): 
voded antHelper Os: 
void initvifi(), 
void pageHead(), 
void setup(void) 4 
DBG OUTPUT PORT.begin(115200), 
SPIFFS.begin(), 


initHelper(), //inclou connexió Vifi 


//get heap status, analog input value and all GPIO statuses in one json call 
server ent"/all", NTIP GET, (146) £ 


String json s "(", 

json ts "V"heapv":" - String(ESP.getFreeHeap()), 

json ts ", N"analogv":" - String(analogRead(A0)), 

json ts ", M'apioON":" ds String((uiat32 t)(((GPI I GPO) 8 OxEFFE) ll ((GP16I 


8 OxO1) és 16))): 
ison 85 ")", 
server.send(200, "text/json", json), 
json s String), 
a DE 


server.begin(), 
DBG OUTPUT PORT.println("HTTP server started"), 
) 


void loop(void) 4 
server.handleClient(), 


dfececocenesanenenesaneseseauseenesenenen Helper functions 


void pageHead()í 
server.setContentLength (CONTENT. LENGTH UNRNONN) , 
SEVES EN C GOL Excm SE 
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IoT amb D1 mini (ESP8266) i codi Arduino 


server.sendContent ("€IDOCTYPE htmloshtmlo sheadostitleoGestigioacute: de 
fitxersre/titleocmeta charsets'UTF-8'o cmeta names'viemport' 
contents 'nidth-device-midth'/oc/headocbody2"), 


) 


void initvifi()( 
if (MODE NMIFISSNIFI STA) 4 
NiFi.mode(lNIFI STA), 
NiFi.begin(ssid, passmord), 
DBG OUTPUT PORT.printf ("Connecting to 3sin", ssid), 
mhile (MiFi.status() lS NL CONNECTED) 4 
delay(500), 
DBG OUTPUT PORT.print("."), 


) 

DBG OUTPUT PORT .printinÇ""), 

DBG OUTPUT PORT.print("Connectedi IP address: "), 
DBG OUTPUT PORT .println(MiFi.localIP()), 


DBG OUTPUT PORT.print("Open http://"), 

DBG OUTPUT PORT.print(ViFi.localIP()), 

DBG OUTPUT PORT.println("/dir to see the file brovser"), 
) 
else ( 

NiFi.mode(UIFI AP), 

NiFi.softAP(ssid, passmord), 

DBG OUTPUT PORT.print ("Open http://192.168.4.1/dir to see the file 

bronser"), 


) 


) 


void initHelper()( 

DBG OUTPUT PORT .print(t"Nn"), 

DBG OUTPUT PORT.setDebugOutput(true), 
Dir dir €S SPIFFS.openDir("/"), 
mhile (dir.next()) 4 

String fileName - dir. fileName(), 
size t fileSize - dir.fileSize(), 
DBG OUTPUT PORT.printf("FS File: 42s, size: asvn", fileName.c str(), 
formatBytes(fileSize).c strÚ)), 
DBG OUTPUT PORT.printf("Nn"), 
) 


initvifi(), 


/ /SERVER INIT 
server.on("/dir", HTTP GET, printDirectory), 
server.on("/create", HTTP GET, handleFileCreate), 
server.on("/delete", HTTP GET, handleFileDelete), 
//first callbací is called after the request has ended vith all parsed 
arguments 
//second callbacR handles file uploads at that location 
server.on("/upload", HTTP POST, (J() 4 
ORRetorn(): 
1, handleFileUpload), 
server.on("/edit", HTTP GET, handleFileEdit), 
server.on("/save", HTTP POST, handleFileSave), 
//called mhen the url is not defined here 
//use it to load content from SPIFFS 
server .onNotFound(II() í 
if (IhandleFileRead(server.uri())) 
server.send(404, "text/plain", "FileNotFound"), 
) 
40a 
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Part IV. El sistema de fitxers SPIFES. Utilització a un servidor vveb. 


) 


void ORRetorn() 4 

pageHead(), 

server.sendContent ("Operacigioacute, realitzada amb 8Zegrave:xitebr/oca 
href-'/dir'oòTornar a gestigoacute, de fitxerss/axs/bodyoc/htmlo"), 


) 


void printDirectory() 4 
Dir dir € SPIFFS.openDir("/"), 
pageHead(), 
server.sendContent ("shisxGestigioacute:, de fitxers SD virtuals/n1o"), 
nhile (dir.next()) £€ 
String fileName - dir. fileName(), 
Size t fileSize - dir.fileSize(), 
DBG QUIPUT PORT,printií ("FS Files Xs, size: xen", fileName.c strí), 
formatBytes(fileSize).c str)), 
String output, 
output ts "ca hrefs'/", 
output ts fileName.substring(1), 
output ts"'o", 
output t- fileName.substring(1), 
output ts"e/ao ", 
output t- formatBytes(fileSize).c str(), 
output 45 " ca hrefs'", 
output t- fileName, 
output t-"2domnload-i' style-'text-decoration: none,'ò 8489921, 
c/axènbsp,gmbsp," 
output 4t- " ca hrefs'/edit2zfes", 
output ts fileName, 
output t-"' style-s'text-decoration: none,'ox 8489997, e/axgenbsp,gmbsp,", 


output 45 " ca href-'/deletezrillfitxers", 
output ts fileName, 
output t-"' style-'text-decoration: none,'x 84410006, e/axcbr/o", 


server.sendContent (output), 
DBG OUTPUT PORT.println(output), 


) 


server.sendContent("sbr/ocform actions'/create'xFitxer nou: cinput 
types'text' names'noufitxer' values''x o cinput type-s'submit' 
value-'Crea'xe/forme"), 

server.sendContent ("sbr/ocform method-'post' enctype-s'multipart/form-data' 
action-'/upload'oFitxer a enviar: cinput types'file' namecs'myFile'ocinput 
types'submit' values'Envia'oe/formv"), 

server. sendContent ("s/bodyos/htmlo"), 


) 
void handleFileCreate() 4 
if (server.args() SS 0) 4 
return server.send(500, "text/plain", "BAD ARGS"), 
) 
String path s "/" t server.arg("noufitxer"), 
DBG OUTPUT PORT.println("handleFileCreate: " t path), 
if (path ss "/") 4 


return server.send(500, "text/plain", "BAD PATH"), 


) 
if (SPIFFS.exists(path)) í 
return server.send(500, "text/plain", "FILE EXISTS"), 
) 
File file - SPIFFS.open(path, "m"), 
nt (ble) t 
file.close(), 
j) else ( 
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return server.send(500, "text/plain", "CREATE FAILED"), 


) 

ORRetorn(): 

path s String(): 
i 


void handleFileDelete() 4 
if (server.args() ss 0) 
return server.send(500, "text/plain", "BAD ARGS"), 
) 
String path — server.arg("Rillfitxer"): 
DBG OUTPUT PORT.println("handleFileDelete: " t- path), 
if (path ss "/") 4 
return server.send(500, "text/plain", "BAD PATH"), 


) 
if (ISPIFFS.exists(path)) ( 
return server.send(404, "text/plain", "FileNotFound"), 


) 
SPIFFS.remove(path), 
ORRetorn(): 

path s String(): 


i 
void handleFileUploadí() 4 
if (server.uri() l- "/upload") 4 
return, 


) 
HTTPUploadéc upload - server.upload(), 
if (upload.status ss UPLOAD FILE START) 4 
String filename - upload.filename, 
if (lfilename.startsVitn("/"T)) 4 
filename € "/" t filename: 


) 
DBG OUTPUT PORT.print("handleFileUpload Name: "), 
DBG OUTPUT PORT.println(filename), 
fsUploadFile - SPIFFS.open(filename, "m"), 
filename - String(): 
) else if (upload.status s- UPLOAD FILE URITE) 4 
//DBG OUTPUT PORT.print("handleFileUpload Data: "), 
DBG OUTPUT PORT.println(upload.currentSize), 
if (fsUploadFile) 4 
fsUploadFile.urite(upload.buf, upload.currentSize), 


) else if (upload.status ss UPLOAD FILE END) 4 
if (fsUploadFile) 4 
fsUploadFile.close(), 


DBG OUTPUT PORT.print("handleFileUpload Size: "), 
DBG OUTPUT PORT.println(upload.totalSize), 


String formatBytes(size t bytes) ( 
if (bytes € 1024) 4 
return String(bytes) t "B", 
) else if (bytes € (1024 1t 1024)) (4 
return String(bytes / 1024.0) - "RB", 
) else if (bytes € (1024 Y 1024 t 1024)) 4 
return String(bytes / 1024.0 / 1024.0) 4 "MB", 
) else ( 
return String(bytes / 1024.0 / 1024.0 / 1024.0) - "GB", 
) 
) 
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String getContentType(String filename) 4 
if (server.hasArg("domnload")) 4 
return "application/octet-stream", 
) else if (filename.endsNith(".htm")) 4 
return "text/html", 
) else if (filename.endsNith(".html")) 4 
return "text/html", 
) else if (filename.endsNith(".css")) 4 
return "text/css", 
) else if (filename.endsNith(".js")) 4 


return "application/javascript", 

) else if (filename.endsNith(".png")) 4 
return "image/png", 

) else if (filename.endsNith(".gif")) 4 
return "image/gif", 

) else if (filename.endsNith(".jpg")) € 
return "image/jpeg", 


) else if (filename.endsVith(".ico")) 4 
return "image/x-icon", 

) else if (filename.endsNith(".xml")) 4 
return "text/xml", 

) else if (filename.endsNith(".pdf")) 4 
return "application/x-pdf", 

) else if (filename.endsNith(".zip")) 4 
return "application/x-zip", 

j) else if (filename.endsNith(".gz")) 4 
return "application/x-gzip", 

) 

return "text/plain", 


5 


bool handleFileRead(String path) 4 
DBG OUTPUT PORT .println("handleFileRead: " £ path), 
if (path.endsvith("/")) 4 
path ts "index.htm", 
) 
String contentType - getContentType(path), 
String pathNithGz — path t ".gz", 
if (SPIFFS.exists(pathNithGz) JJ SPIFFS.exists(path)) 4 
if (SPIFFS.exists(pathNithGz)) 4 
path ts ",.8z": 


) 
File file - SPIFFS.open(path, "r"), 
server.streamFile(file, contentType), 
file.close(), 
return true, 

) 

ceturn, falses 


) 


void handleFileEdit() 4 
if (server.args() SS 0) 
return server.send(500, "text/plain", "BAD ARGS"), 
) 
String path - server.arg("fe"), 
DBG OUTPUT PORT.println("handleFileEdit: " t path), 
if (path ss "/") 4 
return server.send(500, "text/plain", "BAD PATH"), 


) 
if (ISPIFFS.exists(path)) ( 
DBG OUTPUT PORT .print("handleFileEdit Name: "), 
DBG OUTPUT PORT.print(path),DBG OUTPUT PORT.printlin(" FileNotFound"), 
return server.send(404, "text/plain", "FileNotFound"), 


) 
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pageHead(), 

server.sendContent ("eform action-'/save' method-'POST'òFitxer: scinput 
types'text' names'nomfitxer' valuezs'"), 

server.sendContent (path), 

server.sendContent("' readonlyosbr/octextarea names'cos' rovss'30' colss'40' 
Mraps'off'2"), 


File file - SPIFFS.open(path,"r"), 

char buffer(2l, 

buffer(1l) - 0, 
// server.streamFile(file, "text/plain"), 

mhile (file.readBytes(buffer, 1)1-0 ) (4 

server.sendContent (buffer), 

) 

file.close(), 

server.sendContent ("e/textareaxcbrocinput types'submit' 
value-'Desa'xe/formos/bodyos/htmlo"), 


path s String): 
) 


void handleFileSave() 4 
String path -s server.arg("nomfitxer"), 
String text s server.arg("cos"), 
DBG OUTPUT PORT.println("handleFileSave: " t path), 
DBG OUTPUT PORT .println("text: " t text), 
File file - SPIFFS.open(path,"u"), 
IE (title) 4 
DBG OUTPUT PORT.println("file open failed"), 


file.print(text), 
file.close(), 
ORRetorn(): 

path s String): 
text s String(), 
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Part V. Altres shields D1 mini 


El nostre Rit té un bon grapat de shields, però no els té tots. És 
interessant conèixer la resta per seleccionar el maquinari d'un 
projecte. Si trobem un shield amb el component que necessitem 
tindrem un disseny més compacte. 


A més a més, aquest tema és una excusa perfecta per mostrar-vos 
altres dispositius i tècniques de programació. 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Shield de connexions (JORTS) 


A l'hora de passar del prototip de 
desenvolupament o viabilitat al TE re 
prototip de comercialització un 
dels problemes que em vaig trobar 
al llarg del curs 2017-18 va ser la 
connexió de maquinari extern. La 
placa triple amb el seus pins 
mascle al 3r bloc facilita molt 
aquesta connexió al prototip de — 
desenvolupament, en el qual els 
alumnes comproven la distribució 


: . o 
correcta de pins i desenvolupen oTms FOn 90 
els programes de control. Or OD, éj Ono 


Però al passar al prototip de Ens 


comercialització, on els alumnes 
minimitzen el cost del producte i 
dissenyen una capsa amb la 
impressora 3D, l'única solució a 
l'abast era l'ús de plaques de 
prototips per posar els connectors 
al maquinari extem. Aquesta és 
una solució lenta i, de vegades, 
complicada, ja que cal dissenyar 
aquesta — placa i — soldar-la 
correctament. 


"XI DI 
RX Ol 


b/€ NId b7y NId 
: o 


Per tot això a l'estiu del 2018 el 
meu nebot Javier i jo vam 
dissenyar i enviar a fabricar a 
Xina un shield de connexions 
configurable. 
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A la cara superior (TOP) podem configurar el connector J4 de 4 pins, 
i a la cara inferior (BOT) el J3 de 3 pins. Per a cada senyal podem, a 
la cara superior, afegir una resistència de pull-up o pull-dovn. 


A la cara superior (TOP) podem posar una resistència per a cada 
senyal si ens interessa fixar un valor per defecte a aquest pin. 


e — Si la resistència arriba al forat indicat per un quadrat serà un 
pull-dovvn (valor per defecte OV) 


e —Si la resistència és una mica més curta i connecta al forat 
indicat per un cercle serà un pull-up (valor per defecte VCC 
per a aquest connector) 


A continuació podeu veure un exemple real d'aplicació. Uns alumnes 
meus necessitaven per a un prototip de comercialització del seu 
treball de recerca un connector per a l'entrada analògica A0. Amb 
aquest shield el van tenir funcionant en 5 minuts: 


IoT amb D1 mini (ESP8266) i codi Arduino 


Pel desenvolupament de prototips comercials amb el nostre hit 
utilitzarem 2 configuracions típiques, CON1 i CON2. 


Shield CON1 

Caldrà fer alguns ponts a la placa, de forma que 
e — J4 té connexions a D5 (3/4) i DO (4/4) amb VCC — 3,3V (2/4) 
e — J3 té connexió a D6 (3/3) i VCC — 5 V (2/3) 


D'aquesta manera podem connectar un servo a J3 i mòduls amb 
entrades o sortides digitals a J4. S'han escollit D5 i DO per a J4 per la 
seva baixa col-lisió amb altres shields en els projectes considerats. 


13) 
mg 
0 
0 Q 
De Q 
vg 
ve Q 
o 


e 
8 
o 
o 
o 
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Shield CON2 


Caldrà fer alguns ponts a la placa, de forma que 
e — J4 té connexions a D1 (3/4) i D2 (4/4) amb VCC -— 3,3V (2/4) 
e — J3 té connexió a AO (3/3) i VCC — 3,3 V (2/3) 


D'aquesta manera podem connectar mòduls I2C a J4 (SCL/D1 a 3/4 i 
SDA/D2 a 4/4, 3,3V a 2/4, GND a 1/4) i sensors analògics a J3 (A0O a 
3/3, 3,3V a 2/3, GND a 1/3) 


x 
x 
qo 

x 
ais) 

3 Z 

re 

4 Q 


L-d 
E 


an 
z 
RX 
Ral 
Q DI 
R 
Z D2 
So 
z 
)D1 D4 
Go 
EE 
È 
E 
N 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Dual base 


Amb només 2 columnes de shields, aquesta base és molt útil per 
prototips comercials. 


L'antiga versió només portava els connectors per a cada columna. 
L'actual (V2.0.0) és semblant a la triple base, amb línies de potència i 
zona de prototipatge. 


Dual Base 


L. 
an 

on 

Led 

x 

- 

i 

I 

en 

——b 


2 i 


o 
ee0e, 


AN 
COESEOOEC EO EC 


o 
o X 


CIC ICICICIÓ EL 


3) 


o cici (ele: 

€ G 

CEODGCCOC CC 
o) 


QECCEC EE Ç EOI 


i 
9) 
i 
o 


Amb la nova versió podem reproduir l'estructura de la nostra 3a 
columna per a projectes amb nombrosos components externs, O 
incloure algun d'ells a la zona de prototipatge. 
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Protoboard shield 


Molt útil per afegir altres 
components 0 connectors. 

La primera i darrera columna de 
topos estan connectades a les 
respectives senyals del bus. 


La versió antiga del hit (abril 


2018) portava un semàfor de dos 
leds fet amb aquest shield. 
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VVS2812B RGB Shield 


Aquest mòdul porta un led RGB 
VVS2812B, que fa servir un Os us28128 RGB VO 


protocol d'un sol fil (connectat a Q no SHIELD PX Q 
D2) Q ve HEMOS.CC D1 Q 
mD2 (c) 


Malauradament D2 s'utilitza 03 Q 
típicament com SDA al bus I2C. E 0 Q 
Es a dir, si utilitzem aquest : É 
mòdul, no podrem fer servir cap JE: a, Q 
shield amb I2C. — 
Aquest shield estava inclòs a la I R I vei 
versió antiga del Xit (abril 2018), eM 20.8 
i ha estat substituit pel RGB 


shield, amb 7 leds i connexió 
configurable. 


Aquest shield el podem fer servir per a vvearables, on podem canviar 
amb el fil conductor el pin on va connectat i tenir-ne diversos leds 
connectats, o en aplicacions on la resta de mòduls no utilitzen I2C o 
només s'utilitza aquest shield. Un exemple d'aquest darrer cas és el 
m,eu exemple peana, on illuminem amb diversos colors una 
escultura feta amb impressora 3D des de la base amb aquest shield: 


//Install lAdafruit NeoPixel Libraryl 
(https://github.com/adafruit/Adafruit NeoPixel) first. 


Hinclude sAdafruit NeoPixel.ho 

tdefine PIN D2 

Adafruit NeoPixel pixels - Adafruit NeoPixel(1, PIN, NEO BRG - NEO RHZ800), 

// colors RGB values from Viquipedia: https://ca.miRipedia.org/miRi/Colors HTML 


uint32 t colorll- 
OxFFCOCB, // 
OxFFB6C1, // 
OxFF69B4, // HotP in 
OXPE 14932. // DeepP int 


( 
0 Pin 
i 
D 
3 
OxDB7093, // 4 PaleVioletRed 
5 
6 
El 
8 


LightPint 


OxC/1585/, /7 MediumVioletRed 
OxFFAQJA, LightSalmon 
OxFA8072, // Salmon 
0xE9967A, // DarlSalmon 
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OxF08080, // 9 LightCoral 
OxCD5C5C, // 10 IndianRed 
OxDC143C, // 11 Crimson 
0xB22222, // 12 FireBricR 
Ox8B0000, // 13 DaríRed 
OxFF0000, // 14 Red 

OxFF4500, // 15 OrangeRed 
OxFF6347, // 16 Tomato 
OXRFZE5SO, Jn Coral 
OxFF8C00, // 18 DarhOrange 
OXFFA500, // 19 Orange 
OxFFD/00, // 20 Gold 
OXFFFF00, // 21 Yellon 
OXFFFFEO, // 22 LightYellon 
OXFFFACD, // 23 LemonChiffon 
OXFAFAD2, // 24 LightGoldenrodYellom 
OxXFFEFD5, // 25 Papayavhip 
OXFFE4B5, // 26 Moccasin 
OxFFDAB9, // 27 PeachPuff 
OxEEE8AA, // 28 PaleGoldenrod 
OxF0E68C, // 29 RhaRi 
OxBDB76B, // 30 DarhtihaRi 
OXFFF8DC, // 31 CornsilR 
OXFFEBCD, // 32 BlanchedAlmond 
OXFFE4C4, // 33 Bisque 
OxFFDEAD, // 034 Navajovhite 


OxF5SDEB3, // 35 Mheat 
OxDEB887, // 36 BurilyNood 
OxD2B48C, // 37 Tan 

OxBC8F8F, // —38 RosyBroun 
OxF4A460, // 39 SandyBromn 
OXDAA520, // 40 Goldenrod 
0xB8860B, // 41 DarRGoldenrod 
OxCD853F, // 42 Peru 

OxD2691E, // 43 Chocolate 
0x8B4513, // 44 SaddleBroun 
OxA0522D, // 45 Sienna 
OxA5S2A2A, // 46 Broun 
0x800000, // 47 Maroon 
0x556B2F, // 48 DarROliveGreen 
0x808000, // 49 Olive 
0x6B8E23, // 50 OliveDrab 
Ox9ACD32, // 51 YellouGreen 
Ox32CD32, // 52 LimeGreen 
Ox00FF00, // 53 Lime 

Ox7CFC00, // 54 LamnGreen 
Ox7FFF00, // 55 Chartreuse 
OXADFF2F, // 56 GreenYellon 
Ox0OFF7F, // 57 SpringGreen 
OxOOFA9A, // 58 MediumSpringGreen 
Ox9O0EE90, // 59 LightGreen 
0x98FB98, // 60 PaleGreen 
Ox8FBC8F, // 61 DarRSeaGreen 
Ox3CB371, // 62 MediumSeaGreen 
Ox2E8B57, // 63 SeaGreen 
0x228B22, // 64 ForestGreen 
0x008000, // 65 Green 
0x006400, // 66 DarhGreen 
Ox66CDAA, // 67 MediumAquamarine 
Ox0OFFFF, // 68 Aqua 

Ox0OFFFF, // 69 Cyan 

OxEOFFFF, Jf 70 LiguteCyan 
OxAFEEEE, // 71 PaleTurquoise 
OX7FFFD4, // 72 Aquamarine 
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Ox40E0DO, // 73 Turquoise 
Ox48D1CC, // 74 MediumTurquoise 
Ox0OCED1, // 75 DarRTurquoise 
Ox20B2AA, // 76 LightSeaGreen 
OxSF9EAMO, // 77 CadetBlue 
0x008B8B, // 78 DarhCyan 
ex008080, // 79 Teal 
OxBOC4DE, // 80 LightSteelBlue 
OxXBOEOE6, // 81 PounderBlue 
OXADD8E6, // 82 LightBlue 
Ox8JCEEB, // 83 SRyBlue 
Ox87/CEFA, // 84 LightSRyBlue 
Ox0O0BFFF, // 85 DeepSRyBlue 
Ox1E9OFF, // 86 DodgerBlue 
Ox6495ED, // 87 CornflomerBlue 
0x4682B4, // 88 SteelBlue 
0x4169E1, // 89 RoyalBlue 
Ox0000FF, // 90 Blue 
Ox0000CD, // 91 MediumBlue 
Ox00008B, // 92 DarhBlue 
0x000080, // 93 Navy 
0x191970, // 94 MidnightBlue 
OxXEGEGFA, // 95 Lavender 
OxDeBFD6, // 96 Thistle 
OXDDAODD, // 97 Plum 
OxEEB2EE, /f/ 898 Violet 
OxDA/0D6, // 99 Orehid 
OxFFOOFF, // 100 Magenta 
OxXBA55D3, // 101 MediumOrchid 
0x9370DB, // 102 MediumPurple 
Ox8SA2BE2, // 103 BlueViolet 
Ox9400D3, // 104 DarhViolet 
0x9932CC, // 105 DarhOrchid 
0x8B008B, // 106 DarhMagenta 
0x800080, // 107 Purple 
0x4B0082, // 108 Indigo 
0x483D8B, // 109 DariSlateBlue 
OXGASACD, // 110 SlateBlue 
Ox/BG68EE, // 111 MediumSlateBlue 
OxFFEFFF, // 112 vhite 
OxF5F5SDC, // 113 Beige 
OxXFAEBD7, // 114 Antiquelhite 
OxFFE4E1, // 115 MistyRose 
0x808080, // 116 Gray 
0x708090 // 117 SlateGray 

ho 


int indexcolor, 
uint32 t oldcolor, nevcolor, 


void setup() 
pixels.begin(), // This initializes the NeoPixel library. 
indexcolor — random(118), 
oldcolor-colorlindexcolorl, 
pixels.setPixelColor(0, oldcolor), 
pixels.shom(), // This sends the updated pixel color to the harduare. 
delay(400), // Delay for a period of time (in milliseconds). 
) 


void 100p() ( 
indexcolor — random(118), 


nemncolor-colorfindexcolorl, 
mhile (oldcolor ls nemcolor) 4 
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uint32 t oldR - oldcolor 8: OxXFF0000, 
uint32 t nemR - nemcolor 8: OxFF0000, 
uint32 t oldG - oldcolor 8. Ox00FF00, 
uint32 t neuG — nencolor 8: Ox0OFFO0, 
uint32 t oldB - oldcolor 8: 0x0000FF, 
uint32 t nemB —- nencolor 8: OxX0000FF, 


if (nemR 2 oldR) ( 
oldcolor ts 0x10000, 
L 
if (nexR € oldR) í 
oldcolor -- 0x10000, 
) 
if (nemG 2 oldG) 4 

oldcolor ts 0x100, 
) 


if (nemG € oldG) 4 
oldcolor -- 0x100, 


if (nexB 2 oldB) í 
oldcolor ts Qx1, 


) 

if (nemxB € OldB) 4 
oldcolor -- Qx1, 

) 


pixels.setPixelColor(0, oldcolor), 
pixels.shom(), // This sends the updated pixel color to the hardmare. 
delay(10), // Delay for a period of time (in milliseconds). 
) 
pixels.setPixelColor(0, oldcolor), 
pixels.shom(), // This sends the updated pixel color to the hardmare. 
delay(1000), // Delay for a period of time (in milliseconds). 


105 


IoT amb D1 mini (ESP8266) i codi Arduino 


Micro SD card shield 


Aquest —shield ens — permet 


Txe 
treballar amb SDs reals, de forma LOLIN da o 


molt semblant a com hem E 
utilitzat la SD virtuals del NA, Lard Di Q 
sistema de fitxers SPIFES. 
Si en fet meravelles amb els 
2MB de les SDs virtuals, 
imagineu-vos amb els GB de les 
SDs reals. 

Malauradament la funció 
serveStatic() no funciona amb 
SDs reals. Haurem de crear codi 


per servir nosaltres els fitxers. 

L' exemple SdserverAP ens permet llistar els fitxers d'un directori i 
accedir a qualsevol fitxer de la SD. Fixeu-vos que tota la màgia del 
codi està en la funció handleNotFound(): 


Hinclude cESP8266MiFi.ho 
Hinclude cNiFiClient.ho 
Hinclude cESP8266MebServer . ho 
Hinclude €SPI.hoò 

Hinclude €SD.ho 


tdefine DBG OUTPUT PORT Serial 


const charf ssid s "ESPserver", 
const chart passmuord € "robotica", 


ESP8266ebServer server (80), 


static bool hasSD - false, 
File uploadFile, 


void returnOR() $ 
Senversendy206,. "text/piann, eo 


) 


void returnFail(String msg) 4 
server.send(500, "text/plain", msg t "Nrin"), 


) 


bool loadFromSdCardí(String path) 4 
String dataType - "text/plain", 
if (path.endsNith("/")) 4 

path ts "index.htm", 
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) 


if (path.endsvNith(".src")) 4 
path - path.substring(0, path.lastIndexOf(".")), 

) else if (path.endsNith(".htm")) £Ç 
dataType - "text/html", 

) else if (path.endsNith(".css")) 4 
dataType - "text/css", 

) else if (path.endsNith(".js")) ( 
dataType - "application/javascript", 

) else if (path.endsNith(".png")) ( 
dataType - "image/png", 

) else if (path.endsNith(".gif")) £Ç 
dataType - "image/gif", 

) else if (path.endsNVith(".jpg")) £€ 
dataType - "image/jpeg", 

) else if (path.endsNith(".ico")) £€ 
dataType - "image/x-icon", 

) else if (path.endsNith(".xml")) £Ç 
dataType - "text/xml", 

) else if (path.endsNith(".pdf")) £Ç 
dataType - "application/pdf", 

) else if (path.endsNith(".zip")) £€ 
dataType - "application/zip", 


) 


File dataFile - SD.open(path.c str()), 
if (dataFile.isDirectory()) ( 

path t- "/index.htm", 

datalype - "text/html", 
dataFile - SD.open(path.c str()), 


) 


if (ldataFile) 4 
return false, 


) 
if (server.hasArg("domnload")) 4 
dataType - "application/octet-stream", 
) 
if (server.streamFile(dataFile, dataType) l- dataFile.size()) 4 


DBG OUTPUT PORT.println("Sent less data than expectedi"), 
) 


dataFile.close(), 
return true, 


) 


void handleNotFound() 4 
if (hasSD 88: loadFromSdCard(server.uri())) € 
return, 
) 
String message - "SDCARD Not Detectedinin", 
message ts "URI: ", 
message ts server.uri(), 
message ts "NnMethod: ", 


message ts (server.method() -- HTTP GET) 2 "GET" : "POST", 
message ts "NXnArguments: ", 
message ts server.args(), 


message ts "Vn", 
for (uint8 t i s 0, i 8 server.args(), i4t) ( 
message ts " NAME:" t- server.argName(i) t- "Nn VALUE:" - server.arg(i) t 
"nt: 
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) 
server.send(404, "text/plain", message), 
DBG OUTPUT PORT.print(message), 


) 


void printDirectory()4 
File dir - SD.open("/files"), 
dir.remindDirectory(), 
server.setContentLength (CONTENT LENGTH UNRNONN) , 
server.send(200, "text/html", ""): 
server.sendContent ("ehtmlo sheadx e/heado sbodyo "), 
nmhile(true) € 
File entry - dir.openNextFile(), 
(CL ENtRy) 4 
// no more files 
breaR, 
) 
String output, 
output ts "ca href-'/files/", 
output ts entry.name(), 
output ts"'2", 
output ts entry.name(), 
output ts'e/axcbr/o", 
server.sendContent (output), 
entry.close(), 
) 
server.sendContent ("s/bodyos/htmlò"), 
dir.close(), 


) 


void setup(void) 
DBG OUTPUT PORT .begin(115200), 
DBG OUTPUT PORT.setDebugOutput(true), 
DBG OUTPUT PORT .print(t"Nn"), 
NiFi.mode(lVIFI AP), 
NiFi.sSoftAP(ssid, passmord), 


server.on("/list", HTTP GET, printDirectory), 
server .onNotFound (handleNotFound), 


server.begin(), 
DBG OUTPUT PORT.println("HTTP server started"), 


if (SD.begin(SS)) 4 
DBG OUTPUT PORT.printin("SD Card initialized."), 
hasSD - true, 
) 
) 


void loop(void) 4 
server.handleClient(), 


) 
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Datalogger shield 


Aquest mòdul, comercialitzat pel 
fabricant RobotDyn, combina el 
lector microSD amb el RIC, 
facilitant molt el disseny de 
dataloggers. 

Encara que inclòs al Rit inicial 
d'abril de 2018, es va substituir 
pel RTC shield. El problema és 
l'alt nombre de pins utilitzats. A 
més a més del bus I2C (D1 i D2) 
pel RTC, utilitza quatre pins més 
(D5, D6, D7 i D8) per la SD. 
Això podria provocar col-lisions 
amb altres mòduls del hit. 

És a dir, només ens queden 
lliures els pins D3 i D4, AO, i el 
bus I2C. 

Per tant és un mòdul interessant 
quan fem servir sensors I2C, o 
ampliem el nombre d'entrades 
amb un dispositiu I2C (com 


l'arduino pro mini inclòs al it). P ly peix er 


RTC 1 MicroSD 


A l'exemple SDdatalogger fem servir aquest shield per enregistrar 
les dades de temperatura d'un shield DHT juntament amb l'hora. 
Mitjançant un servidor vveb que s'activa amb el polsador del 1-button 
shield. Cal tenir paciència: potser caldrà esperar més de 30 s polsant 
el botó per engegar el servidorl 

Hinclude sESP8266MiFi. ho 

Hinclude sMiFiClient.ho 

Hinclude cESP8266MebServer. hò 

Hinclude sSD.ho 


Hfinclude shEMOS DHT12.hò 
Hinclude sMire.ho 
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Hinclude "RTClib.h" 


RTC DS1307 RTC, 

DateTime nov, 

DHT12 dhti2, 

ESP82664ebServer server ( 80 ), 
unsigned long ara, 


const char tssid - "jortsnet", 
const char tpassuord € "9periodico", 


void espera (int n) í( 
mhile (millis()saratn) ( 
delay(1), 


) 
void sendFile() 4 


File dataFile - SD.open("/datil.csv"), 
server.streamFile(dataFile, "application/octet-stream"), 
dataFile.close(), 

) 


void setup() 4 

pinMode (D3, INPUT), 

pinMode (D4, OUTPUT) , 

digitalrite(D4,HIGH), 

Serial.begin(9600), 

SD.begin(), 

SD. remove("/datil.csv"), 

Vire.begin(), 

RTC.begin(): 

if (1 RTC.isrunning()) 4 
Serial.printin("RTC is NOT runningi"), 
RTC.adjust(DateTime( DATE , TEME 9): 

) 


) 


void 100p() 4 
if (digitalRead(D3)--true)í 
File f - SD.open("/datil.csv",FILE MRITE), 
for(int is1, i530, itt)( 
ara —S millis(), 
non S RTC.non(), 
if(dhti2.get()--0)4 
f.print(ara/1000), 
Te pGimeElt Je 
f.print(nom.day OO), 
TOC CS LOS 
f.print(non.month()), 
Ti DE )S 
f.print(non.year ()92000) , 
pc ee (OE 
f.print(nom.hour()), 
dedi): 
f.printínon.minute()), 
pre (e)S 
f.printínon.second()), 
fo primtl,'). 
f.println(dhti2.cTemp), 
espera(1000), 
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Ambient light Shield (BH1750) 


Aquest shield és equivalent al 
nostre Mòdul sensor de llum I2C ca 
BH1750FVI.Podem fer servir LOLIN : 
directament el codi d'aquell o Ambient Light 
mòdul. 

Quan es tracta de mesurar la llum 
cal. —tenir molt —clar com 
col'loquem el sensor. El sensor 
en si es pot separar del shield, 
però ens caldria un altre shield 
(TFT I2C Connector Shield) per 
connectar-lo, ja que el connector 
que porta es especial. Tan 
especial que encara no he trobat 
un conjunt de connectors en bus 
per utilitzar una única sortida per 
diversos dispositius I2C. 
M'estimo més fer servir el nostre 
mòdul: connexió a la triple base 
o al shield CON2 amb cables 
Dupont estàndard , ja està separat 
i en puc fer un bus de connexions 
IC amb una placa de pistes i 
unes tires de pins. e 
De totes formes és interessant HEMOS.CC a 
conèixer l'existència d'aquest 

shield, per si us va bé per algun 

projecte. 
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SHT30 Shield 


Aquest shield és semblant al 
nostre DHT shield, però amb 
mesures més precises: £ 3 26 per SHT38 Shield 
la humitat relativa i £ 0,3 CC i U2.1.8 
amb una resolució de £ 0,05 0C 
amb un rang entre -4020C i 
4 1252C. També funciona per 
I2C, i porta una sortida d'alarma 
programable. 

El seu ús és tan senzill com el del 
DHT gracies a la llibreria 
VVEMOS SHT3x". 

De fet, és una bona alternativa al 
DHT pel hit, i més potent. 

A l'exemple SHT30 OLED 
mostrem al display la 
temperatura i la humitat cada 
segon: 


Hinclude sNire.ho 

Htinclude sINEMOS SHT3X.hoò 

dsinclude eSFE MicroOLED,hò dl Include the SFE MicroOLED library 
ftdefine PIN RESET 255 // Connect RST to pin 9 

fdefine DC JUMPER O 


MicroOLED oled(PIN RESET, DC JUMPER), // I2C declaration 
SHT3X sht30(0x45), 


void setup() 
oled.begin(), // Initialize the OLED 


19 Disponible a https://github.com/AvemosNIVEMOS SHT3x Arduino Library 
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Barometric Pressure Shield 


Aquest shield I2C porta un 


sensor de pressió i temperatura 
HP303B. 


Pressió 
Rang: 300 : 1200 hPa 
Precisió: £ 0,005 hPa 
Exactitud: £ 1 hPa 


Temperatura 
Rang: -40 PC : t85 CC 
Exactitud: £ 0,5 'C 


Com veieu, una sonda perfecta 
per a una estació meteorològica 
de butxaca. 


RS 


NJ 
L s 
en) 


Veiem l'exemple barometric test: 


Hfinclude eLOLIN HP303B.ho 
LOLIN HP303B HP303BPressureSensor, 


void setup() 

í 
Serial.begin(9600), 
HP303BPressureSensor.begin(), 
Seriel.primtini "Barometric test"): 


) 


115 


IoT amb D1 mini (ESP8266) i codi Arduino 


116 


Part V. Altres shields D1 mini 


TFT 1.4 Shield 


Aquest shield porta una pantalla 
TFT color de 128x128 px, 1,4". 
Utilitza un protocol SPI, amb els 
pins D3, D4, D5 i D7 per 
defecte. També afecta al pin DG. 
Amb els seus 262,144 colors 
aquesta pantalla és ideal per 
mostrar gràfiques, imatges ... I al 
mateix preu que el nostre display 
OLED monocroml 

És més ampla que una columna, 
amb la qual cosa haurem de 
veure com distribuir els shields 
per alçades si utilitzem una base. 
Aquest ha estat el motiu, — bé 
juntament amb el nombre de pins es a a — 
utilitzats, pel que vaig escollir Vore a el 
V'OLED pel nostre hit. 


Es pot connectar de 3 formes diferents: 


TFT 1.4 vaeé 


O irr LED TFTCS OTFT.OC TFT.RST 
De eD4. D4 De 


e — a una columna d'una base 
e — amb una tira de pins 


e amb un connector especific TFT al TFT I2C Connector 
Shield 


Utilitza les llibreries Adafruit GFX i Adafruit ST7735, que podeu 
instal-lar amb el gestor. 


Com veieu a la imatge alguns pins es poden canviar. Fins i tot 
controlar més coses (RST independent, LED), incrementant la 
despesa de pins. 
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Cal dir que els pins D5 (SCR), D6 (MISO) i D7 (MOSI) formen la 
part fixa del bus SPI, i per tant es poden compartir amb altres 
dispositius SPI, com ara el datalogger shield. Amb D4 (TFT. CS) el 
bus accedeix a la pantalla TFT, i amb D8 (CS) a la SD. En canvi, 
com el microSD shield també fa servir D4 (TF-CS) per accedir a la 
SD, caldria canviar el CS per defecte d'un dels dos shields per 
utilitzar-los a la vegada. 


L'exemple TFT 1.4 Bitmap , adaptat de la vveb d'Adafruit" pel 
nostre shield, carrega una imatge de la SD virtual i la mostra en 
pantalla: 


Hinclude sAdafruit GFX.ho // Core graphics library 
Hinclude scAdafruit ST7735.ho // Harduare-specific library 
Hinclude €SPI.hoò 

Hinclude cESP8266MiFi.ho 

Hinclude cNiFiClient.ho 

Hinclude cESP8266MebServer. ho 

Hinclude €FS.ho 


tdefine TFT RST -1 //for TFT I2C Connector Shield V1.0.0 and TFT 1.4 Shield V1.0.0 
ddefine TFT CS D4 //for TFT I2C Connector Shield V1.0.0 and TFT 1.4 Shield V1.0.0 
ddefine TFT DC D3 //for TFT I2C Connector Shield V1.0.0 and TFT 1.4 Shield V1.0.0 


// Sdefine TFT RST -1 //for TFT I2C Connector Shield (V1.1.0 or later) 
// tdefine TFT CS DOQ //for TFT I2C Connector Shield (V1.1.0 or later) 
// Sdefine TFT DC D8 //for TFT I2C Connector Shield (V1.1.0 or later) 
Adafruit 517735 tí — Adaficunit SU/735(1FT €S, TFT DE, FT RST): 


void setup(void) 


20 Veure https://learm.adafruit.com/adafruit- 1-44-color-tít-vvith-micro-sd- 
sochet/drav/ing-bitmaps 
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( 
SPIFFS.begin(), 
tft.initR(INITR 144GREENTAB) , 
tft.setTextlrap(false), // Allom text to run off right edge 
tft.fillScreen(ST7735 BLACR), 
Serial.begin(9600), 
) 


void loop(void) 


tit, filiSscreeneSTI735 BLACI): 
// change the name herel 
bmpDran("Llilyi28.bmp", O, 0), 
// vait 5 seconds 
delay (5000), 

) 


// This function opens a Nindons Bitmap (BMP) file and 
// displays it at the given coordinates. It's sped up 
// by reading many pixels morth of data at a time 

// (rather than pixel by pixel). Increasing the buffer 
// Size taíes more of the Arduino's precious RAM but 

// maíes loading a little faster. 20 pixels seems a 

// good balance. 

Hdefine BUFFPIXEL 20 


void bmpDran(char tfilename, uint8 t x, uinti6 t y) 1 


Esile bmpFile, 

int bmpldidth, bmpHeight, // VYH in pixels 

uint8 t bmpDepth, // Bit depth (currently must be 24) 
Uuint32 t bmplmageoffset, // Start of image data in file 

uint32 t rouSize, // Not alvays — bmpNidth, may have padding 


uints t sdbufrer(3tBUFFPIXELI): // pixel buffer (RiGtB per pixel) 
uint8 t buffidx - sizeof(sdbuffer), // Current position in sdbuffer 
boolean vgoodBmp iallser ll Set to true on valid header parse 
boolean flip true, // BMP is stored bottom-to-top 

int mM, h, rox, col, 

Uintests ne te, lo: 

uint32 t pos € O, startTime € millis(), 

if(ix os tft.midth()) ll (y 2€ tft.height())) return, 
Serial.printin(), 

Serial.print(F ("Loading image '")), 

Serial.print(filename), 

Serrat printina vs 

// Open requested file on SD card 


uU I 


if ((bmpFile €s SPIFFS.open("/1i1y128.bmp","r")) SS NULL) 4 
Serial.print(F("File not found")), 
return, 

) 


// Parse BMP header 
if(readi6(bmpFile) s- 0x4D42) €( // BMP signature 
Serial.print(F("File size: ")), Serial.printin(read32(bmpFile)), 
(void)read32(bmpFile), // Read 8. ignore creator bytes 
bmplmageoffset - read32(bmpFile), // Start of image data 
Serial.print(F ("Image Offset: ")), Serial.println(bmpImageoffset, DEC), 
// Read DIB header 
Serial.print(F ("Header size: ")), Serial.println(read32(bmpFile)), 
bmpMidth o read32(bmpFile), 
bmpHeight - read32(bmpFile), 
if(readiG6(bmpFile) s- 1) ( // H planes -- must be '1l' 
bmpDepth - readi6(bmpFile), // bits per pixel 
Serial.print(F ("Bit Depth: ")), Serial.println(bmpDepth), 
if ((bmpDepth €- 24) 88. (read32(bmpFile) s- 0)) ( // QO S uncompressed 
goodBmp - true, // Supported BMP format -- proceedi 
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Serial.print(F ("Image size: ")), 
Serial.print(bmpidth), 
Serial.print('x'), 
Serial.println(bmpHeight), 
// BMP rons are padded (if needed) to 4-byte boundary 
ronSize — (bmpNidth £ 3 t 3) 8 —3, 
// If bmpHeight is negative, image is in top-domn order. 
// This is not canon but has been observed in the mild. 
if (bmpHeight € 0) 4 
bmpHeight -bmpHeight, 
flip false, 
) 
// Crop area to be loaded 
mM S bmpNidth, 
h s bmpHeight, 
if((xtm-1) 25 tft.midthO)) ms tft.midthQ) - x, 
ifi(yeh-l) os tft,height()) h - tit .height() - y: 
// Set TFT address mindon to clipped image bounds 
tft.startVrite(), 
tft.setAddrlindon(x, y, m, h), 
for (rou-O0, roneh, romtt) ( // For each scanline... 
/i See to start of scan line, It might seem labor- 
// intensive to be doing this on every line, but this 
// method covers a lot of gritty details liRe cropping 
// and scanline padding. Also, the see only tahes 
// place if the file position actually needs to change 
// (avoids a lot of cluster math in SD library). 
if(flip) // Bitmap is stored bottom-to-top order (normal BMP) 
pos - bmpImageoffset t- (bmpHeight - 1 - rom) t romSize, 
else // Bitmap is stored top-to-bottom 
pos - bmpImageoffset t rom t romSize, 
if(bmpFile.position() l- pos) ( // Need seeR2 
tft.endrite(), 
bmpFile.seeR(pos), 
buffidx — sizeof(sdbuffer):, // Force buffer reload 


for (col-0, colem, coltt) ( // For each pixel... 
// Time to read more pixel data2 
if (buffidx o- sizeof(sdbuffer)) ( // Indeed 
bmpFile.read(sdbuffer, sizeof(sdbuffer)), 
buffidx - O, // Set index to beginning 
tft.startVrite(), 
i 


// Convert pixel from BMP to TFT format, push to display 
b sdbufferlibuffidxttl, 
8 sdbufferlibuffidxttl, 
r sdbufferlbuffidxttl, 
tft.pushColor(tft.color565(r,8,D)), 
dl end pixel 
) // end scanline 
tft.endrite(), 
Serial.print(F("Loaded in ")), 
Serial.print(millis() - startTime), 
Serial.printin(" ms"), 
) // end goodBmp 


) 
) 
bmpFile.close(), 
if(lgoodBmp) Serial.println(F("BMP format not recognized.")), 


) 


// These read 16- and 32-bit types from the SD card file. 
// BMP data is stored little-endian, Arduino is little-endian too. 
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IoT amb D1 mini (ESP8266) i codi Arduino 


TFT 2.4 Touch Shield 


Aquest —shield — ofereix —una 
pantalla 320x240 TFT de 2,4" 
sensible al tacte. 

Utilitza les biblioteques 
Adafruit GFX, Adafruit ILI9341 
i XPT2046 Touchscreen. 

La connexió del bus de columna 
es femella. També es pot 
connectar amb una tira de pins o 
amb el TFI I2C Connector 
Shield. 

Utilitza els pins DO, D3, D5, D6, 
D7 i D8, amb un bus SPI. 
Especialment interessant per a 
menús interactius, nsimulacions 
de joysticix, signatures ... 


L'exemple TFT2p4 touchpaint, adaptat de la vveb d'Adafruit"" per a 
aquest shield, permet dibuixar en la pantalla amb el dit: 


21 Veure https://learn.adafruit.com/adafruit-2-4-tít-touch-screen- 


featherving/resistive-touch-screen 
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Hi 
Hi 
Hi 
Hi 


Hd 
Hd 
Hd 
Hd 


Ad 
XP 


14 
Hd 
Hd 
Hd 
Hd 


ds 
td 
8d 
in 


ncelude €SPI,hò 

nclude cAdafruit GFX.ho 

nclude cAdafruit 1L19341.ho 
nclude €XPT2046 Touchscreen.ho 


efine TFT CS DOQ //for D1 mini or TFT I2C Connector Shield (V1. 
efine TFT DC D8 //for Dl mini or TFT I2C Connector Shield (V1. 
efine TFT RST -1 //for D1 mini or TFT I2C Connector Shield (V1. 
efine TS CS D3 //for D1 mini or TFT I2C Connector Shield (V1. 


aftruit 1119341 tft sc Adafruit 1L19341(TFT CS, TFT BC, TFT RST): 
T2046 Touchscreen ts(TS CS), 


This is calibration data for the rau touch data to the screen 
efine TS MINX 3800 
efine TS MAXX 100 
efine TS MINY 100 
efine TS MAXY 3750 


Size of the color selection boxes and the paintbrush size 
efine BOXSIZE 40 

efine PENRADIUS 3 

t oldcolor, currentcolor, 


void setupí(void) 


) 


vo 


Serial.begin(115200), 

delay(10), 

Serial.println("Featherlving TFT"), 

dit (CES Began()): 4 
Serial.printin("Couldn't start touchscreen controller"), 
mhile (1), 

) 

ts.setRotation(4), 

Serial.println("Touchscreen started"), 

tft.begin(), 

tft.setRotation(2), 
ft.fillScreen(ILI9341 BLACR), 


// maíe the color selection boxes 

tft. fillRect(O, GO, BOXSIZE, BOXSIZE, 1L19341 RED): 

tft.fillRect(BOXSIZE, QO, BOXSIZE, BOXSIZE, 1L19341 YELLON), 

tft. fillRect(BOXSIZETt2, O, BOXSIZE, BOXSIZE, 1119341 GREEN), 

tft.fillRect(BOXSIZETt3, OQO, BOXSIZE, BOXSIZE, 1L19341 CYAN), 

tft.fillRect(BOXSIZETA, O, BOXSIZE, BOXSIZE, 1L19341 BLUE): 
ft.fillRect(BOXSIZETS5, QO, BOXSIZE, BOXSIZE, 1L19341 MAGENTA), 


// select the current color 'red' 
tft.dramRect(O, O, BOXSIZE, BOXSIZE, 1L19341 NHITE), 
currentcolor - IL19341 RED, 


id l00p(7) € 

// Retrieve a point 

TS Point p - ts.getPoint(), 

serial, primt(tX — "Ne Serdal: primtipex)e 
Serial.print("NtY € "), Serial.print(p.y), 
Serial.print("itPressure — "), Serial.printin(p.zZ), 


/ Scale from —0-24000 to tft.uidth using the calibration £'s 
s map(p.X, TS MINX, TS MAXX, O, tft.uidth)), 


h 
p.ex — 
p.y S map(p.y, TS MINY, TS MAXY, O, tft.height()), 


it (Pey BOXSIZE) 4 
oldcolor € currentcolor, 
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or later) 
or later) 
or later) 
or later) 


DE mel mel qe 
logo oNo) 


coordinates 


currentco 
tft.dramnRec 


IoT amb D1 mini (ESP8266) i codi Arduino 


ii (p.ex € BOXSIZE) 1 


or s 1L19341 RED, 
t(O, 0, BOXSIZE, BOXSIZE, 


il else it (p,x 3 BOXSIZE 2) $ 


— 
EC PB CE CO (DB Et CS (P et OO 


urrentco 
ft.dramnRec 


urrentco 
ft.dranRec 


urrentco 
ft.dranRec 


urrentco 
ft.dramnRec 


or € 1L19341 YELLON, 
t (BOXSIZE, O, BOXSIZE, BOXSIZE, 1L19341 NHITE): 
se if (p.x € BOXSIZEX3) ( 

or € 1L19341 GREEN: 
t (BOXSIZE12, Q, BOXSIZE, BOXSIZE, 
se if (p.x € BOXSIZEY4) ( 
or € 1L19341 CYAN: 
t (BOXSIZE13, Q, BOXSIZE, BOXSIZE, 
se if (p.x € BOXSIZE25) ( 
or € 1L19341 BLUE: 
t (BOXSIZE14, Q, BOXSIZE, BOXSIZE, I 


i else ií (p.x $€ BOXSIZET6) 4 


currentco 
tft.dranRec 


) 


au de) 
if 


dE 
if 
du 
dE 


18 


) 


ho ha ho ha ima 
— 
- 


dcolor 


(oldcol 


Eh 
le) 
ah 
o cle 
le) 


le) le) 
o a 
h. on 
le) le) 


le) 
o 
La 
le) 


le) 
o 
La) 
le) 


or s 1L19341 MAGENTA, 
t(BOXSIZET'S, O, BOXSIZE, BOXSIZE, I 


Il- currentcolor) 4 
or ss 1L19341 RED) 


or ss 1L19341 CYAN) 


or ss 1L19341 BLUE) 


i 


"H 


RectiO, O, BOXSIZE, BONSIZE, (11934 
lor SS 1L19341 YELLON) 

Rect (BOXSIZE, O, BOXSIZE, BOXSIZE, 
lor SS 1L19341 GREEN) 


lRect (BOXSIZEX2, O, BOXSIZE, BOXSIZE, 
lRect(BOXSIZEY3, O, BOXSIZE, BOXSIZE, 
lRect(BOXSIZETA, O, BOXSIZE, BOXSIZE, 


or ss 1L19341 MAGENTA) 
IRect(BOXSIZETS, 8, BOXSIZE, BOXSIZE, 


if (((p.y-PENRADIUS) ò 0) 880 ((p.ytPENRADIUS) € tft 
tft.fillCircle(p.x, p.y, PENRADIUS, currentcolor), 


) 
h 
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1L19341 NHITE), 


L19341 NHITE), 


L19341 NHITE), 


L19341 NHITE), 


L19341 NHITE), 


1 RED): 
1L19341 YELLON): 
1L19341 GREEN): 
1L19341 CYAN): 
1L19341 BLUE): 


1L19341 MAGENTA), 


MESA) 4 


Part V. Altres shields D1 mini 


TFT I2C Connector Shield 


Aquest —shield — porta — uns 
connectors especials pels shields 
TFT i pels sensors I2C. 
Especialment útil quan el display 
TFT el volem separar de la base 
del D1 mini. TFT412C 
Aneu amb compte amb la versió Connector 
del connector. Han canviats 
coses. La V1.0.0, pensada amb el 
TFT 1.4 Shield, portava un 
selector per TFT. CS, per defecte 
connectat a D4. La versió actual 
V1.1.0, pensada amb el TFT 2.4 
Touch Shield, no porta aquest 
selector, TFT CS va connectat 
ara sempre a DO. El mateix passa 
amb TFT DC. Abans portava un 
selector, per defecte a D3. Ara va 


: , 3 

fixe a D8. je eD3/0 

A més a més la V1.1.0 porta un CEAITLI TG Guants 

nou connector I/O amb D3 i D4..—lIEUAN a (5 
5 


Aquesta darrera connexió amb 
D3 no té sentit si no s'utilitza el 
TFT 1.4 Shield, que no té sensor 
tàctil. 


TFT-LEDIETS-CS 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Motor shield 

Aquest shield porta un pont H.—f XXXI IE 
controlat — pel — seu — propi G mo GNDRTS3U RT DTRRX Ç 
microcontroladors — al — que Mt: ee, 


s'accedeix amb I2C. 

D'aquesta manera podem 
controlar 2 motors fàcilment. 
Podem aturar-los o engegar-los, 
canviar la velocitat, el sentit de 
gir, frenar-los o deixar-los en an. 

stand-by de forma independent UM CND A1A2B284 S 
Utilitza — la llibreria — pròpia 9189/9181 81 918) 
VVEMOS Motor Shield", i el 
firmvvare" es pot modificar. 

Pot donar una intensitat promig 
de 1,2 A i 3,2 A de pic, amb una 
alimentació independent — pels 
motors de fins a 15 V. 
Personalment, per a aplicacions 
de tipus robots m'estimo més 
utilitzar Els mòduls ESP12 V2. 
La placa NODEMCU motor o MO MAgeiiee is Dia nel 
shield . Aquesta altra placa porta V1.8.8 

interruptor i regulador de tensió 
pel mòdul ESP8266, així com 
connectors per a sensors externs. 


22 Disponible a 
https:/github.com/AvemosVVYEMOS Motor Shield Arduino Library 


23 Disponible a https://github.com/Avemos/Motor Shield Firmvvare 
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DS18B20 shield 


Aquest shield porta un sensor de 
temperatura DS18B20, essent 
equivalent al nostre Mòdul 
sensor temperatura DS18B20 . 

El problema és que va connectat 
al pin D2, inutilitzant el bus I2C. 
A més a més, no porta connector 
per altres sensors al mateix bus 
OneVyYire. 

Pot ser interessant quan no fem 
servir el bus I2C, o per vvearables 
on podem canviar la connexió 
amb el fil. 

Podeu fer servir els mateixos 
programes que tenim pel nostre 
mòdul. Això si, cal canviar el pin 
per D2. 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Battery Shield 


Es tracta d'un shield al qual 
podem connectar una bateria de 
Liti (3,3 V : 4,2 V) amb un 
connector PH2-2.0MM o bé 
soldada a la placa. 
La bateria es carrega amb el seu 
propi — connector — microUSB. 
Podem configurar el shield per 
carregar amb un màxim de 0,5 A 
(per defecte) o 1 A. 
El shield genera 5 V / 1 A amb la 
bateria — i — els —injecta — a 
l'alimentació del bus del D1 
mini. 
Porta dos leds: vermell mentre 
carrega i verd quan la càrrega és 
completa. 
Podem configurar el shield per 
connectar l'entrada analògica A0 2 BATTERY 
a la bateria i així monitoritzar el Gsno,, V130 O Mis 
seu estat. Q su UN0- 303 E 
o 


, 
ce 

te 1A aç 

se e8.5A19 o 


AG-BAT 16 DG 


MEMOS.CC 
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Part V. Altres shields D1 mini 


DC Povver Shield 


Aquest shield porta un regulador 
de tensió de 5 V / 1 A que injecta 
al bus D1 mini. 

Podem alimentar el sistema amb 
una entrada de 7V:24V 
connectats amb un connector de 
barril, soldant a la placa o amb 
una regleta 


CC-PURNER 
SHIELD 


UIN GND 
IN GN 
0 9 
e 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Part VI. HTML5, javaScript i AJAX 


El llenguatge HTML va ser dissenyat al CERN per Tim Berners-Lee 
i Robert Caillau VEU al 1991 per interconnectar estacions de treball 
gràfiques X-VVindovy. Per compartir informació entre ordinadors 
diferents. 


En la evolució de la vveb, empreses amb programari propietari han 
corromput aquesta filosofia: extensions del navegador de Microsoft, 
plugins flash i java ... han dificultat crear continguts amb aquest 
estàndard multiplataforma. 


HTMLS torna a posar les coses al seu lloc. Amb la seva potència no 
hi ha excusa per altres extensions o plugins sinó és per ànsia de poder 
de certes companyies. 


HTMLS va estretament lligat a javascript i CSS. El primer per fer 
codi que s'executa al navegador del client, estalviant recursos al 
servidor i transit de dades a la xarxa, i accelerant la resposta de la 
pàgina. Objectius prioritaris quan el nostre servidor és un modest 
ESP8266, que, a més a més, és possible que hagi generat la seva 
pròpia Xarxa. 


Al llarg d'aquest capítol veurem alguns dels recursos que HTML5, 
javascript i CSS ens ofereixen per millorar les nostres interfícies de 
xarxa. Però recordeu que això és només un tasteig, les possibilitats" 
són il-limitadesi 


24 Us recomano la fantàstica vveb https:/mvvvi.ve3schools.com/. Els seus tutorials, 
referències i exemples són genialsl 
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Part VI. HIMLS5, javaScript i AJAX 


HTML5 input type-'range'. Creació de 
sliders. 


HTMLS5 introdueix nous tipus d'entrades als formularis". Comencem 
amb el tipus range, que genera una barra de selecció o slider. 


Veiem un exemple (slider) on fem servir tres sliders per modificar les 
components de color del led central del nostre shield RGB: 


RH Tutorial slider xo - o dal 
És GC OQ Q Nosegurl 192.168.133/canviarr-1... XX —m I Il PD 
i: Aplicacions (nm tecno Mn importat de Fi: h En Altres adreces d'interès 
Vermell 
Verd: 

Blau: 
l CANVMR / 


Hinclude cESP8266MNiFi.ho 
Hinclude cNiFiClient.hoò 
Hinclude cESP8266MebServer . ho 


const char tssid - "Aquí el nom de la teva xarxa", 
const char tpassmord —- "Aquí la contrasenya de la xarxa", 


ESP8266ebServer server ( 80 ): 


Hinclude sAdafruit NeoPixel.ho 
tdefine PIN D8 
Adafruit NeoPixel pixels - Adafruit NeoPixel(1, PIN, NEO GRB t- NEO RHZ800), 


String mensaje — "" 


ffececeeeeee- CODIGO HTML PAGINA DE CONFIGURACION--------2------- 
String pagina s "€IDOCTYPE htmlo" 

"ehtmlo" 

"eheadò" 


"etitlesTutorial sliders/titles" 

"emeta charsets'UTF-8'2" 

"emeta names'viemport' contents 'midth-device-midth'/o" 
"e/heado" 


25 Veure https:/vyvv.vv3schools.com/html/html form input types.asp 
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"ebodyo" 

"etable style-'midth:1004'ocform action-'canviar' method-'get'ò" 
"etroctdoVermell:e/tdoctdocinput types'range' namecs'r' min-'O' 
max-'255'xe/tdxe/trò" 

"etroctdoVerd:e/tdoctdocinput types'range' names'g' mins'O' 
max-'255'xe/tdxe/trò" 

"etroctdoBlau:e/tdostdocinput types'range' names'b' min-s'Q' 
max-'255'xe/tdxe/trò" 

"etroctdxe/tdoctdocinput types'submit' values'CANVIAR' /oe/tdxe/trò" 
"e/formos/tableo" 

"e/bodyo " 
efi": 


void paginacanvi() 
server.send(200, "text/html", pagina), 
) 


void canviar colors() 4 
pixelsssetPixelColor(0, serversarg (Tre). tent OO, server,arg(TE7). tolnt). 
SErVEr ae CD) tom): 
pixels.shom(), // This sends the updated pixel color to the harduare. 
paginacanvi(), 
) 
void setup() 4 
NiFi.begin ( ssid, passumord ), 
pixels.begin(), 
server.on("/", paginacanvi), 
server.on("/canviar", canviar colors), 
SEnver, BEg am): 


pixels, setPixelCtolor(e, pixels,Color(O, 63, O)): 
pixels.shon(), 


) 
void 100p() 
server,handleClient(), 
) 
Primer de tot fixeu-vos que he canviat el D2 original per D8 a la línia 
tdefine PIN D8 
ja que aquest exemple inicialment va ser fet pel VVS2812B RGB 


Shield, inclòs a la primera versió del hit. 

Us recomano afegir sempre al shead: la línia 

"emeta name-'viemport' contents 'midth-device-midth'/ò" 

que adapta la visualització de la pàgina a l'amplada del dispositiu. 


Imprescindible per mostrar correctament la pàgina a dispositius 
mòbils. 
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Fixeu-vos que al codi HTML sempre faig servir la cometa simple ('). 
Això permet incloure el codi HTML al codi arduino amb cometes 
dobles ("). 


Per crear al formulari el slider fem servir el codi 


input typez'range' namez'g' min-'Q 


Aquest valor el recuperem i interpretem com a nombre amb el codi 
ET Il 
Això ho fem pels tres colors RGB, cadascú amb el seu propi 
paràmetre. 
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IoT amb D1 mini (ESP8266) i codi Arduino 


HTML5 input type-'color" 


A l'exemple Color Picher seleccionem el color del nostre RGB 
shield amb un selector de color. La seva aparença canvia segons el 


dispositiu: 


I ED Tutorial slider h x i - z 


€ 5 C N O Nosegurl 192168.133/canviarfavcolo... X—m I IQ i 


HE: Aplicacions (nm tecnd Altres adreces d'interès 


33 192.168.1.33 o J 


mm cavar) 


Selecció de color El 


Més 


CANCEL-LA CONFIGURA 


x 2 a ap 
Tomar — Endavant — Pàginici Marcadors Pestanyes 
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String mensaje — "", 


ffececeeeeec- CODIGO HTML PAGINA DE CONFIGURACION-----2---2------- 
String pagina € "cIDOCTYPE htmlo" 

"ehtmlo" 

"eheadò" 


"etitles Tutorial sliders/titles" 

"emeta charsets'UTF-8'2" 

"emeta names'viemport' contents 'midth-device-midth'/o" 
"e/heado" 

"ebodyo" 

"eform action-'canviar' method-'get'ò" 

"einput types'color' names'favcolor' values'HATTOQQO') " 
"einput types'submit' values'CANVIARI' /oc/brò" 
"e/formo" 

"e/bodyo" 

antats": 


void paginacanvi() £€ 
server.send(200, "text/html", pagina), 
) 


int hex2dec(byte c) ( 
it (c es 'O' BR c ss "9') 4 


CSUC ze OU 
) else if (c òs 'A' 88 C ss 'F') 4 
Lectura cs As de dOr 
) else if (cos 'a' ge c cs 'f') ( 
Letun ce das do dO: 
) 
L 
void canviar colors() 
dit. Meri pre 
String ic: 


cs server.arg("favcolor"), 

Serial.print("cs "), 

Serial.printin(c), 
rshex2dec(c.charAt(1))ti6thex2dec(c.charAt(2)): 
g-hex2dec(c.charAt(3))t16thex2decí(c.charAt(4)), 
b-hex2dec(c.charAt(5))t1i6thex2dec(c.charAt(6)): 
Seria, pet CA 

Serial.printin(r), 

Serial.print("gs "), 

Serial.printin(g), 

Serial.print("b: "), 

Serial.printin(b), 

pixels.setPixelColor(0, r, g, b), 
pixels.shom():, // This sends the updated pixel color to the hardmare. 
paginacanvi(), 


) 


void setup() 
Serial.begin(115200), 
NiFi.begin ( ssid, passmord ), 
pixels.begin(), // This initializes the NeoPixel library. 
server.on("/", paginacanvi), 
server.on("/canviar", canviar colors), 
server.begin(), 


pixels.setPixelColor(0, pixels.Color(0, 63, 0)), 
pixels.shom():, // This sends the updated pixel color to the hardmare. 
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IoT amb D1 mini (ESP8266) i codi Arduino 


Amb el codi HTML5 


seleccionem un color en format RGB. Separem les components amb 
codi arduino del tipus 


per poder cridar a la funció setPixelColor() amb les tres components 
de color separades. 
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Incloure eines HTMLD5 a la SD virtual 


A la comunitat del programari lliure hi ha una quantitat immensa de 
programadors que han creat eines HTMLS fantàstiques que es poden 
aprofitar desant uns quants fitxers a la nostra SD virtual. Podem fer 
servir FSManager, la navalla suissa per a la gestió de fitxers a la SD 
virtual via VViFi per desar aquests fitxers i accedir-hi. 


A l'exemple carrusel he modificat l'exemple —bitmapSPIFFS 
afegint-hi la funcionalitat de FSManager i fent un escanejat de la SD 
virtual per trobar arxius amb l'extensió .dat per mostrar els bitmaps 
que contenen. Per simplificar el seu ús, la funcionalitat del 
FSManager l'he posada en dos fitxers (FSManagercpp i 
FSManager.h) a la mateixa carpeta del programa". 


I, el més important, he afegit a la carpeta data l'eina image2cpp"" que 
permet codificar nous bitmaps per afegir-ne. 


Aquí teniu el contingut de carrusel.ino 


Hinclude sMire.ho 

Hinclude €SFE MicroOLED. ho 
Hinclude cFS.hoò 

Hinclude "FSManager.h" 

extern ESP8266lebServer server, 


èdefine PIN RESET 255 // 

tdefine DC JUMPER QO // I2C Addres: Q - 0x3C, 1 - OXx3D 
MicroOLED oled(PIN RESET, DC JUMPER), // I2C Example 
Euble ens 

uint8 t pixels(167241, 


void loadbitmap(String fitxer), 
void setup() 
SPIFFS.begin(), 
initHelper(), //inclou connexió Nifi i server 
// Aquí podem afegir altres funcions server.on() 


server.begin(), 


oiLed.pegdm():: 
oled.clear (ALL), 


26 Veure Annex 9: Afegint la funcionalitat de FSManager als nostres projectes 
27 Disponible a http://javi.github.io/image2cpp/ 
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oled.display(), 
delay(1000), 
) 


void 100p() 4 
Dir dir - SPIFFS.openDir("/"), 
nhile (dir.next()) 4 
String fileName - dir.fileName(), 
if (fileName.endsNith(".dat"))í 
oled.clear(PAGE), 
loadbitmap(fileName), 
oled.dramBitmap(pixels), 
oled.display(), 
espera(1000), 


) 


String getLine() 4 
String S'— s 
char c 3 f.read(), 
nmhile ( c 1 'Nn') 4 

SS ERC dE 

CE TL REead), 
) 

return(S) 


) 


int convertFromHex(int ascii)f 
if(ascii 7 O0x39) ascii es 7: // adjust for hex letters upper or lomer case 
return(ascii 8c OXf), 


) 


void loadbitmap(String fitxer)í 
uint8 t sal161, 
SUC ME CS ts ds deles 
i SO SPIRFS. open(íitxer, r)s 
for (i0,i824,i44)4 
txtsgetLine(), 


ESO, 

Or GIS ON ds UG ee a 
mhile (txt.charAt(R) IS 'X') Ref, 
saljl € convertFromHex(txtIRtil)t16, 
saljl ts convertFromHex(txtiRet2l), 
Rit, 

) 


DO QS OS 
pixelslitiotilssaljl, 
) 


f.close(), 


) 
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Utilitzant AJAX 


Si volem mostrar dades a la nostra interfície vveb de forma eficient 
AJAX és la solució. 


Només hem de generar pàgines de text amb el nostre ESP8266 amb 
les dades i una bonica pàgina vveb amb codi javascript a la nostre 
servidor vveb. Millor fer la pàgina a la SD virtual i modificar el seu 
aspecte amb el nostre FSManager incrustat. 


Veiem l'exemple DHT ajax: 


Hinclude e€FS.hoò 
Hinclude "FSManager.h" 
extern ESP8266lebServer server, 


Hftinclude sINEMOS DHT12.hoò 
DHT12 dhti2, 


void setup() 

SPIFFS.begin(), 

pinMode (D4,OUTPUT), 

initHelper(), //inclou connexió MNifi i server 

server.on("/ajax info.txt", HTTP GET, (1() 4 
dhti2.get(), 
String txt s String(dhti2.cTemp), 
server.send(200, "text/plain", txt), 
Ext OS ERIE(): 

DE 


server.begin(), 


5 


void 1l00p() 
digitalrite(D4, LOU), 
espera(100), 
digitalNrite(D4,HIGH), 
espera(100), 

) 


Senzill i breu, o0i7 


Recordeu que a la mateixa carpeta tenim FSManager.cpp i 
FSManager.h que s'encarreguen de la gestió vveb de la SD virtual. 


Ara s'entén perquè serverbegin() no està inclòs dintre de 
initHelper(). Abans d'iniciar el servidor vveb cal definir les pàgines 
pròpies de la nostra aplicació. 
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Veiem el fitxer index.htm creat a la SD virtual: 


chtmlo 

cheado 
cmeta http-equiv-'Content-Type' content-'text/ntml, charset-sUTE-8'02 
cmeta names'vieuport' content-s'vidth-device-vidth'o 
CtitlexAJAX Teste/titleo 


estyleo 
body Íí 
beclgsoundsecodors Corasuller 
y 
e/styles 
scripts 
function loadTemp() 
var xhttp — neu XMLHttpRequest (), 
var temp — 0, 


xhttp.open('GET', lajax into.txt', false), 
xhttp.send(), 

temp — parseFloat (xhttp.responseText), 
return (temp), 


) 


S'/Sercapte, 
estyleo 
tvalor 
border-radius: 25px7 
bachground: f/3AD21, 
peddaneune 20px, 
macdene 559px, 
height: 12px, 
text-align: center, 
R 
e/seyde 
s/heado 
sbodyo 


chioTemperaturas/hio 
cdiv style-s"padding-left:40px,padding-bottom:5px, "ò 
sp id-lvalorios/po 


c/divo 

cpocimg ids'icona' sres'cloud.svg'oe/po 
sseripto 

var myVar — setlInterval (myTimer, 1000), 
function myTimer() 


var t- loadTemp(), 
document . getElementById('valor').innerHTML — ttl' OC', 
dE 2 VA di 
document . getElementById('icona').src — 'sun.svg', 
) 
else 4 
document . getElementById('icona').src — 'snovmflaRe.svg', 
) 
b 
S/Sera pe, 
s/bodyo 
c/ntmlo 


Tota la màgia està en la funció myTimer(). No només actualitza el 
valor de la temperatura amb 


var t- loadTemp(), 
document . getElementById('valor').innerHTML — tt' OC', 
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A més a més canvia la imatge de sota en funció del valor de la 


temperatura: 
acabes, IDIUREl 
document . getElementById('icona').src — 'sun.svg', 
y 
else 1 
document . getElementById('icona').src — 'snomflaRe.svg', 


y 
El truc és utilitzar id al codi HTML: 
sp id-'valor'oe/po 


que és el mateix id que fem servir per canviar el contingut en aquell 
paràgraf: 


document . getElementById('valor').innerHTML — t4' Cl, 
Amb un altre id identifiquem la imatge mostrada: 
cpocimg ids'icona' sres'cloud.svg'os/po 


i la modifiquem: 


document . getElementById('icona').src — 'sun.svg', 
Te) aut 74982028 o En 
7 192.168.1.33 (S) o 192.168.1.33 6) o 
Temperatura Temperatura 


ES 
LO 


ç a Op il ç a CA (a 


Tornar Pàginici Marcadors Pestanyes Tornar Pàginici Marcadors Pestanyes 


Naturalment a la nostra SD virtual tenim les tres imatges SVG: 
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di Gestió de fitxersr xo, — MM P 
€ 3 C DN EQ Nosegur/ 192.168.1.33/di RR —m— XII: 
NH: Aplicacions (nm tecno (mn importat de Fir nm l Em Altres adreces d'interès 


Gestió de fitxers SD virtual 


sun.svg 4.12RB SD — x 

O3RBS — X 

Vg 23.12RBS ss X 
favicon.ico 14.76RB 8 — X 
index.htm l.24RB 8 — x 
47.8ORB ocupats de 1.86MB totals h 


Fitxer nou: Crea 


Fitxer a enviar: / Tria un fitxer / No s'ha triat cap fitxer Envia 


I tot això amb només 48 EB de la nostra SD virtuall 


Fixeu-vos que poc ocupen les imatges. Són gràfics vectorials, 
re-escalables i molt eficients. 


Fixeu-vos també com el codi CSS millora l'aspecte de la interfície. 
Aquest codi dona l'aparença d'un botó arrodonit a la temperatura: 


estyleo 
tvalor ( 
border-radius: 25px5 
bachground: f/3AD21, 
peddingi: 20px, 
MC OO pzr 
height: 12px, 
text-align: center, 
y 
e/stygles 


Fixeu-vos que valor és l'id del paràgraf on posem la temperatura, i va 
precedit pel signe sostingut (£). 
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La potència de javascript. Gràfics HTML 
canvas 


Javascript és un gran llenguatge, que se executa al navegador del 
nostre ordinador o mòbil, amb una potència de càlcul molt superior 
al nostre modest ESP8266. Cal aprofitar aquest avantatge a les 
nostres interfícies HTML. 


HTML5 permet dos tipus de gràfics. SVG i canvas. SVG és 
vectorial, canvas orientat a bitmap. Cadascú té els seus avantatges i 
desavantatges. 


En el meu cas m'interessa treballar amb canvas, ja que permet baixar 
directament la imatge com un arxiu png, i SVG no. 


Fa poc em vaig fer una càmera tèrmica basada en el nostre Rit, de 
forma que porta FSManager incrustat en el codi per servir els fitxers 
de les imatges capturades, que consisteixen en una matriu 8X8 de 
valors de la temperatura. Vull baixar a l'ordinador les imatges amb 
els colors mapejats tèrmicament per fer un tractament digital de la 
imatge i utilitzar-les en altres treballs. 


Veiem l'exemple visor foto term: 


Si. Només fa un blinX. O això sembla ... 
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A veure. En realitat el que m'interessa es posar a les vostres mans un 
sistema que funcioni i us permeti seguir l'exemple. Un ESP8266 amb 
el FSManager incrustat i amb imatges tèrmiques reals desades a la 
SD virtual. La meva càmera té un codi més llarg ", ja que ha de fer 
les captures d'imatge, mostrar les imatges al TFT 1.4 Shield que 
porta i les dades al OLED Shield ... I, naturalment, crear el servidor 
amb el FSManager, que és la part que treballarem, on el veritable 
codi és a la interfície vveb, concretament als arxius visorhtm i 
visor.js. 


Veiem primer el resultat: 


A Gestió de fitxersr x l A AJAXTest xi - BE x A Gestió de fitxersr x i AJAXTest xi ss HL 
€ EC Q OQ Nosegur/ 192.168.1.33/di RX — GIS i L EC NO Nosegur/ 192.168.133/visorhi x -— IG: 
H: Aplicacions fm tecno Mm importat de Fir x i lm Altres adreces d'interès H: Aplicacions lm tecno (Mm importat de Fi hm l Em Altres adreces d'interès 

LA i Visor de fotos 
Gestió de fitxers SD virtual 


dat S534BSD ds X deter) ei 
dat 534B Ds X lfoto18121520526.dat 


L—n—— ) 
Data: 15/12/18 


Hora: 20:52:6 


visor. ua LOIRBS £ X T(Th) — 30.06 
36.521 cupats de 1.86MB totals Rang temperatures: 20.0.28.0 


Tmin:23.3 
Fitxer nou: Crea 


Tmax:30.0 


Fitxer a enviar: / Tria un fitxer / No s'ha triat cap fitxer Envia 


192.168.1.33/visor.htm 


Quan visualitzo el fitxer visor.htm aconsegueixo una interfície vveb 
que em permet desplaçar-me pels diferents arxius .dat de la SD 
virtual i visualitzar el mapa tèrmic i les diferents dades capturades. 
Tot utilitzant menys de 8 RB de la SD virtuall 


28 El codi de la càmera el teniu disponible a https://github.com/jorts64/fit-D1- 
mini/tree/master/projectes/jorts/camera2020termica 
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Fixeu-vos la reduida mida dels fitxers d'imatge. A continuació teniu 
el contingut del fitxer .dat de la imatge mostrada: 


15/12/18 

20:52:6 

T(Th) — 30.06 

20.0-28.0 

Tmin:23.3 

Tmax:30.0 

24.75, 27.25, 27.50, 27.25, 27.25, 26.75, 28.25, 26.00, 
25.00, 27.25, 28.25, 27.75, 27.00, 27.25, 27.75, 25.00, 
24.25, 28.00, 28.25, 27.50, 26.75, 27.75, 27.75, 25.00, 
24.50, 27.50, 28.25, 26.75, 26.25, 28.00, 26.75, 25.25, 
23.50, 24.25, 25.00, 28.25, 28.75, 26.00, 25.50, 25.00, 
23.50, 24.50, 24.00, 27.00, 30.00, 25.75, 25.00, 25.00, 
24.00, 24.00, 24.25, 27.25, 29.25, 26.00, 24.75, 25.00, 
23.25, 23.75, 23.75, 24.50, 26.25, 25.00, 24.75, 23.75, 


Clicant amb el botó dret sobre la imatge la puc baixar com a arxiu 
.png. Si amb el GIMP redueixo la imatge a les dades originals (8x8) i 
faig una interpolació Lanczos3 per aconseguir una imatge 256x256 : 


LJ Escala la imatge xi (El Escala la imatge x 
El, Escala la imatge El El, Escala la imatge El 
IFototermi(importat)-2 IFototermi(importat)-2 
Mida de la imatge Mida de la imatge 
Amplada: IE as Amplada: — (256 El: 
Alçada: 5 Es L px v Alçada: FES) - L px v 
8 x 8 píxels 256 x 256 pixels 
Resolució X: fr2.o00 a: Resolució X: (2,000 EE 
Resolució Y: (r2,000 El L pixels/in. v Resolució Y: (72,000 Es L pixels/in 
Qualitat Qualitat 
SS Es - Es ss És emet a — R z I 


, Ajuda E Recupera / O cancelta J ESE 4, Ajuda E Recupera / GO cancetla (8, Escala J 


aconsegueixo una imatge millorada digitalment que difícilment 
podria obtenir amb l'ESP8266, i amb una transmissió de dades molt 
petita comparada amb el resultat: 
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"Ifototerm)(importat)-2.0 (Color RGB, 1 capa) 256x256 — El GIMP 


Fitxer Edita Selecciona Visualitza Imatge Capes Colors Eines Filtres Finestr 


E) pl 0 1 20 3 4015 


Impressionant, 012 


Al codi HTML carreguem les funcions javascript del fitxer visor:js al 
cheads i definim els diferents espais gràfics scanvass i textuals 
cpo, cadascú amb el seu id, així com el botons per poder moure'ns 
entre les imatges. — Finalment llegim el directori amb AJAX i 
visualitzem la primera fotografia. Aquí teniu el contingut de 
visor.htm: 


chtmlo 
cheado 
cmeta http-equiv-'Content-Type' content-'text/ntml, charset-UTE-8'02 
cmeta names'viemport' contents'vidth-device—-vidth'o 
StitlexAJAX Tests/titles 
estyleo 
Body i 
pectground-color: Cocnsi lies, 


D: 

e/styles 

ssoript sreslvisor,jsTse/seripto 
€/heado 
sbodyo 
€hloVisor de fotose/hio 
Ser 
Rbutton onclich-Tanterior()"SAnteriors/buttono 
Rbutton onclicR-"seguent () "vSeguents/buttons 
sladie 
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sp id-'nomf'os/po 

ccanvas id-"foto" vidth-"120" height-"120" style-s"border:1ipx solid 40000005 "5 
€/canvaso 

sm/ 

ccanvas id-s"escala" midth-"120" height-"10" style-s"border:ipx solid f0000005/ "o 
€/canvaso 

ap id-'crues'xe/po 

ap id-'fecha'xe/po 

cp ids'hora'xe/po 

cep ids'tth'oc/po 

ap id-'rangt'oe/po 

sp id-'mintemp'oe/po 

ap id-'maxtemp'os/po 

sp id-'tmin'os/po 

sp id-'tmax'oe/po 

sp ids'test'os/po 

cep ids'array'os€/po 


scripts 

var arxius — getDir(), 

/ / document .getElementById('test').innerHIML -s arxius, 
fotonum — 0, 

cus ens — 
SS etapes 
s/bodyo 
c/htmlo 


loadArray (arxiuslfotonuml), 


El fitxer HTML ha quedat elegant perquè he separat les funcions 
javascript a un altre fitxer visor:js: 


camColors — (0x480F, 

0X400F, 0x400F, 02400F, 024010, 023810, 0xX3810, 023810, 0x3810, 023010, 023010, 
0x3010, 0x2810, 0x2810, 0x2810, 0x2810, 0x2010, 0x2010, 0x2010, 021810, 0x1810, 
0x1811, 021811, 081011, Ox1011, 021011, 020811, 020811, Ox0811, 020011, 020011, 
0X0011, 0xX0011, 0X0011, 020031, 020031, 0X0051, 0X0072, 0x0072, 0x0092, 0x00B2, 
0X00B2, 0x00D2, 0200F2, 0X00F 2, 020112, 0X0132, 020152, 0x0152, 020172, 020192, 
0x0192, 0x01B2, 0x01D2, 0X01F3, 0X01F3, 0xX0213, 0xX0233, 0x0253, 020253, 020273, 
0502931, OX 02B3,0x02D3, 0X02D3, 0X0213/020813, 020833, 020338, 020858, 020373, 
0xX0394, 0x03B4, 0x03D4, 0X03D4, 0203F4, 0X0414, 020434, 0x0454, 020474, 020474, 
0x0494, 0x04B4, 0x04D4, 0x04F 4, 0x0514, 0x0534, 0xX0534, 0xX0554, 020554, 020574, 
020574,0X0578, 020578, 020513, 0205412, 020572, 020572, 020574, 020594, 0205994, 
0x0590, 0x0590, 0x058F, 0x058F, 0X058F, 0X058E, OXO5AE, OXO5AE, OxO5AD, OX05AD, 
OXO5SAD, OXOSAC, OXO5SAC, OxXO5AB, Ox05CB, OX05CB, OXO5CA, OXO5CA, OXO5SCA, 0x05C9, 
0X05C9, 0X05C8, 0x05E8, OX05E8, OX05E 7, OXO5E 7, 0X05E6, Ox05E6, 0x05E6, OX05E5, 
0x05E5, 0x0604, 0x0604, 0x0604, 0x0603, 0x0603, 0x0602, 0xX0602, 0x0601, 0x0621, 
0X0621, 0X0620, 020620, 020620, 020620, OXOE20, OXOE 20, Ox0E 40, 021640, 021640, 
Ox1E40, Ox1E40, 022640, 022640, OX2E40, 0X2E60, 0X3660, 0x3660, 0Ox3E60, 0x3E 60, 
0x3E60, 0x4660, 0x4660, 0x4E60, 0x4E80, 0x5680, 0x5680, 0x5E80, 0x5E80, 026680, 
0X6680, Ox6E80, Ox6EAO, OX 76A0, OX 76A0, OXTEAO, OXTEAO, 0x86A0, 0Ox86A0, Ox8EAO, 
Ox8EC0, 0x96C0, 0x96C0, OX9ECO, OX9ECO, OXA6CO, OXAECO, OXAECO, OXB6E0, OXB6E0, 
OXBEEO, OXBEEO, OXCG6E0, OXC6E0, OXCEEO, OXCEEO, OXD6E0, 0OxD700, OxDF00, OXDEEO, 
OXDECO, OXDEAO, OXDE80, OXDE80, 0xXE660, 0xE 640, 0OXE620, OXE600, OXE5SEO, OXE5CO, 
OXE5SA0, OXE580, 0xE560, OXE540, OXE520, OXE500, OXE4E0, OXE4CO, OXE4A0, OXE 480, 
O0XE460, OXEC40, OXEC20, OXECO0, OXEBEO, OXEBCO, OXEBAO, OXEB80, OXEB60, OXEB40, 
OXEB20, OXEB00, OXEAEO, OXEACO, OXEAAO, OXEA80, OXEA60, OXEA40, OxF 220, OXxF 200, 
OXF1E0, OXF1CO, OXF1A0, 0XxF180, 0XF160, OXF 140, OXF100, OXFOEO, OXFOCO, OXFOAQ, 
0xF 080, 0xF 060, 0xF 040, 0xF 020, 0xF8001/ 


BUNCE LO CEDA) 4 
var xhttp - nev XMLHttpRequest (), 
Var dadesAJAX — "buit", 
xhttp.open('GET', l'ajaxdir', false), 
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xhttp.send(), 
dadesAJAX — xhttp.responseText, 
return (dadesAJAX), 
È 
function readArray (fname) 
var xhttp - nev XMLHttpRequest ()ç, 
Var dadesAJAX — "buit", 
xhttp.open('GET', fname, false), 
xhttp.send(), 
dadesAJAX — xhttp.responseText, 
return (dadesAJAX), 
h 
function filterFile(value, index, array) Í 
return value.endsNith(".dat"), 
hi 
FUNCE ON gStDAI EC 4 
var dirstr — readDir(), 
VO dant, ES a SP A, 
var dirdat — dirarr.filter(filterFile), 
nfotos — dirdat.length, 
return dirdat, 


h 


function seguent() Í 

ss (Eotonum s notes) foconumtts, 

var myVar — loadArray (arxiuslfotonuml), 
) 
function anterior() 1 

ds (EOLCONUM o. 0) EOEORUM 

var myVar — loadArray(arxiusIfotonuml), 
h 


function pescala(ctx)í 
for (ide iel2riit) d 
x—107i, 
y-0, 
var tempi-—(maxtemp — mintemp)/12Y(it0.5)-tmintemp, 
var colorindexi- arduino map (tempi, mintemp, maxtemp, 
var colori-—camColorsíicolorindexil, ctx.fillStyle - 
ctx.fillStyle — colorRGBhex(colori), 
CER. FLllRecEl(x, ve 15, 20) 
S 
) 
EUunction proco(ctx, BoxSize) 1 
var colorTemp, 
EO OE Se at) 
For (X—0: x€8: XP) Í£ 
var val — pixelsl (7-y)t8tx), 
colorTemp - val, 
if (val - maxtemp) colorTemp — maxtemp, 
if (val €-— mintemp) colorTemp — mintemp, 


var colorIndex — arduino map (colorTemp, mintemp, maxtemp, 0, 


colorindex — arduino constrain(colorIndex, 0, 255): 
//dram the pixelsl 

var color — camColorsícolorIndex), 

ctx.fillStyle — colorRGBhex (color), 


0 ss 
"4 OQOQFE'", 


255), 


ctex.ftallRect(boxSize Po, DboxsSize rr y, DoxSiuze, DOoxSizeu, 


) 

) 

function loadArray(fotarx) 
document . getElementById('nomf').innerHTIML — fotarx, 
Var txt- readArray(fotarx), 

// —document.getElementById('crues').innerHTML — txt, 
var r S 0, var s —s 0, 
LC text Indexor (Nat), 
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ver techa — txt -SubDScring(O,E)5 

document . getElementById('fecha').innerHTML — "Data: " 4t fecha, 
SS tas 

EO EXE INdEOXOR (A, St 1) 

ver Hora — Ext SUDSEC BLOGS EE) 

document . getElementById('hora').innerHTML — "Hora: " 4 hora, 
SS ri, 

ct SES txt.indexOrE (MNnt,sti)s: 

Ver EE — EXESUDSECINOCGUS EE), 

document . getElementById('tth').innerHTML — tth, 


SE il: 

LC ES txt.indexOrE (VÀnt,sti), 

var tengE — text. SUDSCring(S, EE), 

document . getElementById('rangt').innerHTML —- "Rang temperatures: " 4t rangt, 
SS tl, 

r S txt.indezxOf ("in",sti), 


OS EM EX SOS ESTIC ES Sr 
document . getElementById('tmin').innerHTML — tmin, 


SE dE LP 
r S txt.indexOf (NÀn"T,sti), 
Ver EmMax — Ext SUDSERINGUS, EE), 


document . getElementById('tmax').innerHTML — tmax, 
BOE (La So a) 4 
Set: 
a exe ERO es EA): 
pixels(il- parseFloat (txt.substringí(s,r)), 
y 
EB — aNnGtE IN SEROR (0) 
mintemp — parseFloat (rangt.substring(0,r)), 
maxtemp — parseFloat (rangt.substring(rti)), 
// —document.getElementById('mintemp').innerHTML — mintemp, 
// —document.getElementById('maxtemp').innerHTML - maxtemp, 
var valors — 
for (is0Ç/i88çÇ1i44) 
EO (Ors ei ae 
IO OR ST a OS En De des La eta re Ve 
S 
valors -s valors t "abe/a": 
y 
document . getElementById('array').innerHTML — valors, 


var c — document.getElementById("escala"), 
ver cexl — c.getconcext (2a), 
var esci — pescala(ctxi), 


var c — document .getElementById("foto"), 
Van CExX2 — IC ger Concexte (2a), 
Ver pEl — protodcexa, 15)5 
y 
function arduino map(valinp, mininp, mexinp, minout, mexout) 4 
var valout —- (valinp — mininp) " (maxout — minout) / (maxinp — mininp) t minout, 
valout - Math.roundí(valout), 
return valout, 
y 
function arduino. constrain(valinp, minout, maxout) í 
var velout — valinp: 
if (valinp € minout) valout — minout, 
if (valinp 2 maxout) valout — maxout, 
return valout, 
y 
function colorRGEÈ (co1565) 41 
var colout — (col565 € OxFSO0) $t 256: 
colon — colon te (eolS651 GC OXOTEQN, 827 
colguEè — colguE t (col565 é OSs001E) 3 8, 
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return colout, 
) 
function componentToHex(c) 
var hex — c.toString(16), 
return hex.length —— 1 2 "0" £- hex : hex, 
h 
FUNCELON CODLORECX (ES Dt 
return "4" 4 componentToHex(r) t- componentToHex(g) t 
componentToHex (b), 
È 
GUNEELON CONOLR (ECLSG SI 
var colout — (col565 6 O0xF800) / 256, 
return colout, 
) 
function colorG (col565) i 
var colout — (col565 8 OXO7E0) / 8, 
return colout, 
h 
funetion eolorB (col565) 4 
var colout — (col565 86 OX001FE) 8, 
return colout, 
È 
function colorRGBhex (col565) Í 
return rgbToHex (colorR(col565), colorG(col565), colorB(col565)), 
return colout, 


) 


Cal dir que el programa podria haver estat molt més senzill, però he 
partit del mapejat de colors que faig servir al TFT 1.4 Shield de la 
càmera que utilitza coordenades de color especials" € (5 bits pel 
vermell, 6 pel verd i 5 pel blau, en total 16 bits) mentre que scanvasò 
fa servir 8 bits per cada component RGB. 


Comentem alguns punts interessants del codi javascript: 


e — Les variables locals porten el prefix var quan es declaren: 
var r S 0, var s — 0, 
e —Si inicialitzem una variable sense el prefix var l'estem 


declarant com a variable global, accessible des de qualsevol 
funció: 


29 Podeu obtenir més informació sobre aquestes coordenades de color i la 
llibreria gràfica GFX d'Adafruit a https://learn.adafruit.com/adafruit-gfx- 
graphics-library/coordinate-system-and-units 

30 El sistema de mapejat de temperatura a colors és part dels exemples de la 
llibreria Adafruit pel sensor de càmera tèrmica AMG8833, ho podeu veure a 


https://learn.adafruit.com/adafruit-amg8833-8x8-thermal-camera- 


sensor/arduino-thermal-camera 
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pixels - 


10, 0, 0,0, 0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, O, 
0, 0, 0, 0,0, 0, 0,0, 0, 0,0, 0, 0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0, 0, 0,0, 015 


e Com veieu, no és fàcil declarar arrays amb una mida fixa. Per 
això és tan llarga la declaració anterior. En canvi és fàcil 
afegir nous elements a un array amb el mètode push. 


És molt senzill generar un array a partir d'un text on els 


valors estan separats per un delimitador (el directori AJAX 
dona els noms d'arxius separats per comes: 


Va daten — dics Split i, )s 


I podem eliminar els valors que no compleixen certa condició 
(jo només vull noms d'arxius de fotografies) definida en una 
funció pròpia: 

var dirdat — dirarr.filter(filterFile), 

e Podem modificar el canvas" des de qualsevol funció amb el 
seu id: 


var c — document .getElementById("foto"), 
On CER CEE CON CER 2), 


e — O amb el descriptor obtingut amb getContext(): 


ctx.fillStyle — colorRGBhex (color), 
CEX.E1llRect(boxSize $$ x, DoxSize t y, DboxSize, DoxSize)s 


31 Trobareu més informació sobre canvas i les seves funcions a 
https:/vvrvv.vr3schools.com/graphics/canvas intro.asp 
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La llibreria gràfica gauge.js 
Es tracta d'una llibreria gràfica per mostrar valors d'un sensor Té 


una llicencia MIT" que en permet desar-la a la nostra SD virtual i 
adaptar-la a les nostres necessitats. 


La darrera versió de la llibreria sembla més fàcil de configurar i 
utilitzar, però a mi m'agrada molt una versió més antiga pel seu 
aspecte més formal: 


DH Gauge Test xi -F N - OE X 
P GC Q OO Nosegurl 192.168.1.33/gauge XX mg GG 
ut Aplicacions (mn tecno Mn importat de Fi x / En Altres adreces d'interès 


L -10 10 
Ls 

r Es Temperatura Z 
30 


— 
— 


-40 


-— 
i 
ú- 
là. -50 
7 


V 


A l'exemple gauge la faig servir amb el DHT shield: 


Hinclude cESP8266MNiFi. ho 
Hinclude sNiFiClient.ho 
Hinclude sESP8266MebServer. ho 
Hinclude €FS.ho 

Hinclude siNEMOS DHT12.hoò 
DHT12 dhti2, 


32 Més informació sobre la llibreria gauge.js a http://bernii.github.io/gauge.js/ on 
fins-i-tot podeu provar en línia variacions de paràmetres a la darrera versió de 
la llibreria 
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const char tssid - "nom de la xarxa", 
const char tpassmuord s "contrasenya", 


ESP8266ebServer server ( 80 ): 
const int led - BUILTIN LED, 
TAS: 


void handleRoot() 
digitallrite ( led, LON ), 
char tempí4001, 
int sec —S millis() / 1000, 
int min s sec / 60, 
int hr s min / 60, 
snprintf ( temp, 400, 
"ehtmlbA 
cheadoN 
cemeta http-equivs'refresh' contents'5'/2N 
ctitlexESP8266 Demos/title 
estyle 


body í( bachground-color: fcccccc, font-family: Arial, 


Serif, Color: H000088, JN 
e/stylex 
c/headoN 
cbodyoYN 
ehioSonda de temperatura amb ESP8266€/h12X 
epoca hrefs'gauge/index.html'ogauges/axcp/oN 
cpoUptime: 902d:402d: X02de2/p2N 
c/bodyoN 
e/htmlo", 
hr, min 4 60, sec 4 60 
ds 
server.send ( 200, "text/html", temp ), 
digitalurite ( led, HIGH ), 
) 


void handleNotFound() 4 
digitallrite ( led, LON ), 
String message - "File Not Foundinin", 
message ts "URI: ", 
message ts server.uri(), 
message ts "NnMethod: ", 
message ts ( server.method() s- HTTP GET ) 2 "GET" 
message t- "NnArguments: ", 
message ts server.args(), 
message ts "Nn", 
for ( uint8 t i s 0, i € server.args(), itt ) ( 

message ts " 

) 
server.send ( 404, "text/plain", message ), 
digitalurite ( led, HIGH ), 

) 


void handleAjax()í 
digitallrite ( led, LON ), 
dntidcgec): 
tsdhti2.cTemp, 
Serial.print("Temperature: "), 
Serial.printin(t), 
SErines out — Le 
char tempí100J, 
snprintf(temp, 100, "4d', t), 
out ts temp, 
server.send ( 200, "text/txt", Out), 
digitalurite ( led, HIGH ), 
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Helvetica, 


POST, 


Sans- 


" 4 server.argName ( i ) t- ": " $t server.arg ( i ) £ "Nn", 


) 
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void setup ( void ) 4 


pinMode ( led, OUTPUT 
digitalNrite ( led, HI 
Serial.begin ( 115200 


NiFi.begin ( ssid, pas 


SPIFFS.begin(), 
SE ai. pin En dE 
// Nait for connection 


mhile ( ViFi.status() 


delay ( 500 ), 


JE 

GES 

Je 

sord ), 


I- NL CONNECTED ) 4 


serial print (et js 


) 
Serial.printin ( "" 


Serial. 
Serial. 
Serial. 
Serial. 
server. 


print Ç 
printin 
print ( 
printin 
on ( 


"Connected to " ), 
Ç ssid )s 

"IP address: " ), 

( NiFi.localIP() ), 
', handleRoot ), 


) 


server.serveStatic("/g 
server,on ("/ajax info 
server.onNotFound ( ha 
Server .beginç),: 

Serial.printin ( "HTTP 


void loop ( void ) 4 


) 


server.handleClient(), 


auge", SPIFES, "Jgauge"):, // gauge files dir 
.txt", handleAjax ), 
ndleNotFound ), 


server started" ), 


Podem configurar el control al fitxer /Jgauge/index.html: 


chtmlo 
cheado 


cmeta http-equiv-T"C 
cmeta names"viempor 
ctitlesxGauge Testsé/ 
escript sres"gauge. 
estylexbodyípadding 
cscripto 


function loadTemp() 


i 


var xhttp — nev XML 
var temp — 0, 
XC DO PE UG EE 1 
xhttp.send(), 
temp —- parseFloat(x 
return (temp), 


function DramGauge () 


ontent-Type" content-"text/html, charset-UTE-8T70 
t" content-s"vidth-device-vidth"o 

titles 

es Serp 
:0jmargin:0,bacRground:t222)e/styles 


HttpRequest(), 


../ajax info.txt", false), 


http.responseText), 


í 
gauge — neu Gauge( 
renderTo : 'gauge", 
vidth i document .body.clientNidth, 
height i document .body.clientHeight, 
glov i true, 
units SEC 
title i 'Temperatura', 
minValue ds 5, 
maxValue s SD, 
Mago CES ea SO A SO DO NA OE OUS Or AO SO 
MINORITACIES se OI, 
stroReTichs : false, 
higaligues 4 Í 
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erou PU ce ee dr secieim ge leciorci IO, 0, 255, (317 4, 
i Ecom se OD, Lo sé SO, color s leobpal(2ss, De De aq 3PT $ 
1 Ó 


CON OS 
plate RES ES ES, 
majorTicts rr 'SO00T, 
minorTicts ji 'f$222', 
title so tR222', 
units i 1R6661, 
numbers i 8222", 
needle udostant y "egpel 240, 28, 126, 1t, end vu tegpe( 255, 60, 122, Op 4 
la 
enimetion i 4 


delay : 25, 
duration: 500, 
la P Ulofeitbateiaó 
h 
NN: 
gauge.onready — function() 4 
setInterval( function() 4 
gauge. setValue( loadTemp()), 
he 1000157 
Ll 
gauge.dram(), 
un 
S/Serupies 
€/heado 
sbody style—"bactgoround-color:blacE: Tò 
ccanvas id-s"gaugel"oe/canvaso 
div id-"console"se/divo 
SSordpe, 
DramuGauge (), 
SS em es 
€/htmlo 


Com veieu és molt fàcil canviar 


units SEC 

icsucigS : 'Temperatura', 
minValue BO, 

maxValue s SO, 


o d'altres paràmetres. 


La funció que dona les dades AJAX es podria reduir a la seva 


expressió mínima: 
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La llibreria gràfica canvasjs. Gràfiques de dades. 
Aquesta llibreria la podeu fer servir amb una llicència CC BY-NC. 


A la carpeta canvasjs/examples trobareu diferents exemples de 
gràfiques que es poden fer amb aquesta llibreria. 


El fitxer canvas/index.html és una versio modificada de l'exemple 
spline, que actualitza les dades del nostre DHT shield amb tecnologia 
AJAX: 


DR. CanvasJS Example xi caex 
€ GC ON QO Nosegurl 192.168.1.33/canvasis/index.htm  — HI: 
8: Aplicacions m tecno (nm importat de Fir Es lesPViana (ls vveb2O (ls altres v l Es Altres adreces d'interès 


Temperatura CC 


30 09:29:19 PM: 28 
ee ee ena, aa 


10 


El codi arduino és el mateix que el del capítol La llibreria gràfica 
gauge.js, ja que el vaig fer compatible amb els dos exemples de les 
llibreries. El que canvia en aquest exemple canvasjs és el contingut 
de la SD virtual. No només hi ha aquest tipus de gràfica. A la seva 
vveb podem trobar més de 30 exemples: àrees, rangs, acumulats, 
columnes, barres, sectors, bombolles, capses ... El problema és que 
per fer servir qualsevol gràfic ha d'utilitzar codi extern al núvol i, per 
tant, tenir connexió a internet. No funciona em mode API 


33 Disponible a http://canvasis.com 
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Veiem el contingut de canvas/index.html: 


SIDOCTYPE HTMLo 


chtmlo 
cheado 


escript types"text/javascript'") 
function 


vindov.onload -— 


var Chart — 


Bitler 4 
text: "Temperatura PC" 
ar 
datar (i 
type: "spline", 
detaPointsi ( 
ec men Date), vu 25, 
( X: neu Datel() 4, yi 25 1, 
( X: nem Date() , y: 25 ), 
cc men Date), Von, 
(xi nem Date() , yi 25 1) 
1 
y 
o: 
chart.render(), 
function loadTemp() í 
var xhttp — neu XMLHttpRequest (), 
var temp — 0, 
XOttD. open l'GETT, T..dajax info.txt", 


Ous 


neu CanvasJS.Chart (TchartContainer", 


xhttp.send(), 


temp — parseFloat (xhttp.responseText), 
chart.options.data(0J.dataPoints.push(í( x: 


chart.render(), 


) 


setInterval( function() 


loadTempí(), 
83000)5 


És 
) 


s/serape, 


€esecript sres"canvasis,min,.js"ee/scripts 
ctitlesCanvasJS Examples/titles 


e/heado 
sbody2o 


cdiv ids"chartContainer" 


2/podyo 
€/htmlo 


styles"height: 
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false), 


400px, 


nen Date() , Yy: 


vidth: 


temp)), 


1008 ci dies 
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Part VII. Projectes 


La veritat és que els meus alumnes i jo gaudim fent projectes. Moltl 


La primera fase en un projecte es demostrar la seva viabilitat: tenir 
un prototip operatiu. El nostre Rit és perfecte per a aquesta missió, 
amb la seva diversitat de shields i la possibilitat de connectar 
components externs. 


Depenent del temps disponible ens podem permetre el luxe de fer 
una segona fase: el disseny d'un prototip comercial. Optimitzarem el 
disseny, normalment prescindint de la nostra base triple, posarem 
shields de connectors (podem utilitzar el nostre Shield de connexions 
(JORTS) personalitzat o un dels seus derivats estàndard Shield 
CON/1 o Shield CON2 ) pels components externs, afegirem una font 
d'alimentació adient, li farem una capsa que provarem amb la 
impressora 3D... Al capítol Part VII. Projectes ja en parlarem. 


Quan fem un projecte el primer que hem de fer és pensar quins 
sensors i actuadors necessitarem, i com serà la interfície amb 
l'usuari. Aquesta última pot incloure tant maquinari com control 
remot. Concretarem aquests elements en un diagrama de blocs, on 
detallarem els pins que utilitza cada component. També pot ser 
interessant fer una graella" amb els pins del D1 mini i quins shields 
o components externs van connectats. Sigui com sigui, la idea es 
tenir centralitzada la informació de què tenim connectat a on. 


Veiem alguns exemples dels meus alumnes": 


34 Al Annex 10: Plantilla connexions projecte D1 teniu una plantilla de graella 
que podeu utilitzar als vostres projectes 
35 Podeu accedir a informació més detallada d'aquests projectes a 


https://github.com/jorts64/Lit-D1-mini/tree/master/projectes 
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Saida U Silo Pérez Xarxa Datectora d'Incendis Forestals 


Disseny 


Servidor de 
contrasenyes i EES 
El — 


DISSENY 
14. — Diagrama de blocs 


mem) Dl) 
aC ra dE Green LED 


Disseny 


Taula 4 Taula 2 


Àmbit Lleure Ambit mobilitat 


Escultura música i color Control aforament pàrquing 


Connexions D1 mini 
Connexions D1 mini 


D1 mini Shield / mòdul Notes 
D1 mini Shield / mòdul Notes 
DO 
DO 
D1/SCL 
D1/SCL OLED I2C 
D2/ SDA RGB Bloqueja ús I2C. 
D2/ SDA OLED I2C 
D3 
D3 PB1 SR1 Inc 
D4 
D4 PB2 SR2 Dec 
D5 PB1 MP3 TX 
D6 PB1 MP3 RX D7 PB3 4 digits CL 
El D8 PB3 4 digits DIO 
D8 DS PB4 Led R 
A0 D6 PB4 Led G 
AO 
Documentació 
Documentació 


htlps:/Mitivemos.cclproducts:d1 mini shieldsivs2812b. rgb shield 
https:/Avit vemos.ce/products:d1 mini shields:oled shield 
https./sites google com/allepegasoviana cat/sensors-arduino/actuadors/serial-mp3-player 


https://sites.google.com/a/iepegasoviana.cat/sensors-arduino/actuadors/display-tm1637-4-di 
gits 


Aneu amb compte amb el darrer exemple: van tenir molts problemes 
amb aquestes assignacions. De fet aquest grup d'alumnes van fer 
genuina recerca, trobant les limitacions d'alguns pins amb el tipus 
d'entrada. 
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Una vegada definit el maquinari primer provarem cada shield o 
component extern per separat amb un programa de test. Podeu 
utilitzar els que us he mostrat per cada shield, o tal vegada alguna 
cosa més senzilla. És important desar aquests programes, que 
recomano inserir a la memòria com a annexos, per poder provar en 
qualsevol moment que un component funciona correctament. 


Després connectarem tot el maquinari i tornarem a passar cada 
programa de test per comprovar que en connectar tot el maquinari no 
hi ha cap tipus de problema, com ara col-lisions entre els pins. Per 
exemple, a la documentació oficial del TFT 1.4 Shield en cap 
moment s'esmena que el pin D6 queda afectat, però així és. 


Amb tot connectat i testejat farem un darrer programa de test que 
comprovi tot el maquinari. Això ens servira per veure com fusionem 
tots els codis d'exemple en un de sol: llibreries i variables al principi, 
inicialitzacions al setup() i comandes al loop(). 


Finalment ja podrem treballar en el codi propi del nostre projecte, 
donant-li la funcionalitat desitjada. 


Bona sortl 
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Part VIII. Prototips comercials 


El nostre prototip de viabilitat que utilitza el nostre Xit funciona. Ara 


el volem optimitzar, pensant en la seva comercialització. 


Tria de la base. Connexions mòduls 


externs 


El primer que hem de fer es decidir quina base fem servir, tenint en 


compte si hem de connectar mòduls externs. Tenim diferents 


opcions: 
Interessant quan Fem servir el propi D1 mini 
tenim pocs shieldsi o com a base soldant terminals 
Cap base. connexions externes. femella. Caldrà un shield de 
connectors — per a — les 
connexions a mòduls externs. 
Interessant quan Podem fer servir una de les 
tenim un nombre columnes — per — connectar 
modest de shieldsi — terminals mascle", reproduint 
Base doble —connexions externes. la tercera columna de la nostra 
base triple, per les connexions 
a mòduls externs, o fer servir 
shields de connectors. 
Interessant quan Mateixes opcions que en el 
. tenim un nombre alt case de la base doble. 
Base triple 


de shields i 


connexions extemes. 


Veiem alguns 


exemples de prototips dissenyats pels meus alumnes. 


Penseu que alguns es podrien avui fer més senzills amb el nou shield 


de connectors: 


36 Aneu amb compte amb la versió de base doble. La versió antiga només només 
portava els connectors per a cada columna. L'actual (V2.0.0) és semblant a la 
triple base, amb línies de potència i zona de prototipatge. 
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Node sensor d'incendis 

2017-18 TR Xarxa detectora d'incendis" 

D1 mini / protoboard connector sensor 
flama / DHT / DS18B20 


Avui podríem reemplaçar la protoboard per 
un Shield de connexions JORTS). 


Sensor nevera 
PRE 2017-18 I0TX 


Conjunt per a taula 

PRE 2016-17 I0TY 

D1 mini / SHT30 / connector I2C sensor 
llum. 


Avui podriem reemplaçar la protoboard del 
connector per una Shield CON2 


Conjunt per a finestra 

PRE 2016-17 IoT hospital 

D1 mini / 2 protoboards amb connectors 
DS18B20 , sensor magnètic finestra, LDR. 


Avui podríem reemplaçar les protoboards 
amb per una única Shield de connexions 
(JORTS), amb una configuració especial. 


37 Podeu accedir a informació més detallada d'aquest projecte a 
https://github.com/jorts64/hit-D1-mini/tree/master/projectes/2017-180020TR 

38 Podeu accedir a informació més detallada d'aquest projecte a 
https://github.com/jorts64/hit-D1-mini/blob/master/projectes/2017- 
189020PRE4t/nevera.pdf 

39 Podeu accedir a informació més detallada d'aquest projecte a 
https://github.com/jorts64/hit-D1-mini/blob/master/projectes/2016- 
170620PREA4t/IoT hospital.pdf 
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Recordeu que per les connexions a mòduls externs tenim disponible 
el Shield de connexions (JORTS), molt flexible. El meu nebot Javi i 
jo n'estem molt orgullosos d'aquest disseny. Fixeu-vos quants 
d'aquests dissenys es podrien haver fet amb aquesta shield. 


Veiem la seva aplicació al primer projecte. Volem connectar un 
sensor de flama, amb sortides digital i analògica: 


IBI EI Fem un pont al selector 4/4 entre 
III D8 i el mig 


g 
b/y NId 


2 
b/€ NId 


D5 
Pull — UP/IDONN 


Fem un pont al selector 3/3 entre 
AQi el mig 
Fem un pont entre 3,3V i el mig 


ss N 
NN 
a (NP 
—-4 
La) 
Q 


D4 


Ara ja podem connectar el senyal 
digital a D8 de J4 i la resta de 
connexions a J3 
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Veiem la seva aplicació al darrer projecte. Volem connectar un 


DS18B20 que no porta pull-up , un sensor digital i una LDR a un 


únic shield: 


o 
N 
0 0 
,zZ 
— 
ús 


D4 


o 
- vl 
b/€ NId b7f NId 


D5 
Pull — UP/DONN 


Fem un pont al selector 4/4 entre 

D6i el mig 

Fem un pont al selector 3/4 entre 

D7i el mig 

Posem una resistència de 447 a R4/4 
connectada a UP 

Posem una resistència de 10R a R3/4 
connectada a UP 

Posem una resistència de 100X a 
R3/3 connectada a DOVVN 

Fem un pont entre 3,3V i el mig 


Fem un pont al selector 3/3 entre 
AQi el mig 
Fem un pont entre 3,3V i el mig 


Ara ja podem connectar: 

- DS18B20 al connector J3 

- Sensor digital entre pins 3 i 1 de J4 
- LDR entre pins 4 i 2 de J4 


Realment ens va quedar un disseny molt eficient i flexible del shield 


de connexionsi 
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Disseny de la capsa 


Naturalment voldrem una capsa pel nostre prototip. Res més senzill 
amb les impressores 3D avui en dia al nostre abast. 


Tenim accés a molt programari per dissenyar en 3D. Jo personalment 
recomano OpenSCAD o qualsevol de les seves variants: ScorchCAD 
(Android), OpenJSCAD (en línia), BlocèsCAD (blocs en línia) ... 


Aquí tenim com a exemple part del disseny en OpenSCAD que les 
meves alumnes Núria Padilla i Judit Casas van fer pel seu TR: 


includesM3.scadx translate ((1.5,45.5,1.5J) 
module capsa 1. v304 cube((6.5,6.5,6)), 
differencef() € translate ((5,49,1.51) forat M3(10), 
translate((0,-5,01) I 
cube((39.4,114.3,43.51), difference()( 
translate((1.5,-3.5,1.5J) translate ((1.5,77.5,1.5)) 
cube((36.4,111.3,43.5)), cube((6.5,6.5,6)), 
) translate ((5,81,1.5J) forat M3(10), 
difference()( ) 
translate ((1.5,1.5,1.5J) difference()( 
cube((6.5,6.5,61), translate ((1.5,100.5,1.5)) 
union () £ cube((6.5,6.5,61), 
translate ((5,5,1.5J) forat M3(10), translate ((5,104,1.51)forat M3(10), 
h ) 
) difference()€ 
difference()( translate ((31.5,77.5,1.5J) 
translate ((31.5,1.5,1.5J) cube((6.5,6.5,6)), 
cube((6.5,6.5,61), translate ((35,81,1.51) forat M3(10), 
translate ((35,5,1.5)) forat M3(10), 3 
) differencel)( 
difference()( translate ((31.5,100.5,1.5)) 
translate ((31.5,45.5,1.5J) cube((6.5,6.5,6)), 
cube((6.5,6.5,6)), translate ((35,104,1.51) forat M3(10), 
translate ((35,49,1.51)forat M3(10), ) 
j j 
difference() 
Podeu veure una imatge d'aquest i, / 


part del disseny: 
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Com veieu elles van optar per fer un disseny modular. En el seu cas 
era molt intel-ligent: havien de fer dos capses molt semblants amb 
petites diferències. 


El disseny total (el seu TR és el disseny d'un holter econòmic que 
porta el D1 mini) és molt més complicat. Us estalvio els passos i us 
mostro el resultat final: 


Càlcul del pressupost 


Aquest tema sempre els hi costa als meus alumnes. 
Per fer un pressupost realista caldria fer-ne tres: 


e — Un pressupost del prototip de viabilitat, tenint en compte la 
mà d'obra i el preu del material 


e — Un pressupost del prototip comercial, tenint en compte la mà 
d'obra i el preu del material (únicament dels extres originats 
per aquesta adaptació). 


e — Un pressupost d'una sèrie (posem 1000 unitats) on es tingui 
en compte únicament el que costaria fer aquestes 1000 noves 
unitats (mà d'obra Y material) i al qual hem d'afegir la part 
proporcional (1/1000 en aquest cas) dels dos pressupostos 
anteriors. 
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Part IX. Actualització VViFi del 
programa (OTA) 


Si tenim un microcontrolador com l'ESP8266 amb VViFi, per què 
hem d'endollar un cable per actualitzar el programa7 


L'ESP8266 ens permet la programació OTA (On The Air). És molt 
senzill. Només cal copiar el fitxer OTA.cpp" dintre de la carpeta del 
programa, declarar la funció OTAtest() i cridar-la quan ens interessi. 


No oblideu canviar OTAssid i OTApassvord al principi del fitxer 
OTA.cpp pels valors adients, encara que sigui una xarxa generada pel 
vostre mòbil : 


He volgut posar un nom de xarxa i contrasenya diferents per temes 
de seguretat. A un espai puc tenir el meu D1 mini connectat a la 
xarxa local. Però si vull actualitzar el programa portaré el meu 
portàtil, el meu mòbil, generaré amb el mòbil una xarxa que només 
serveix per a aquest menester i així evitaré que altres persones 
puguin hachejar el meu sistema. Naturalment a casa no em complico 
la vida i poso els valors de la meva xarxa local. 


Veiem l'exemple OTAtest:, que activa OTA en prémer el botó del 1- 
button shield: 


40 El contingut del fitxer OTA.cpp el teniu disponible a 
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OTAmait(), 
digitalrite(ledPin, HIGH), 
) 
digitalrite(ledPin, HIGH), 
delay (300), 
digitalrite(ledPin, LOV), 
delay (300), 


) 
Una vegada carregat el programa, només caldrà prémer el botó. El 
led deixa de fer pampallugues per quedar fix esperant l'actualització. 
Tanquem i obrim l'arduino IDE per que reconegui el dispositiu, que 
trobarem a l'opció Eines — Port dintre del apartat Entrades Netvvort. 
El seleccionem i ja podem reprogramar el nostre D1 mini via VViFi. 


PO OTAtestl Arduino 1.8.5 —OOO" la 
Eitxer Edita Esbós Aj 
Format automàtic CtrleT 
Arxiva el programari 
OTAtest Arregla la codificació irecarrega 
const int buttonl Monitor sèrie CtrlaShiftzM 
const int ledPin Plotter sèrie CtrleShifteL 


VViFi104 Firmvvare Updater 


ESP32 Shetch Data Upload 


void setup() € lESP8266 Setch Data Upload 
pinMode(butto 
pinMode (TedPin) Tarja: "LOLIN(VEMOS) D1 R2 8. mini" 


Flash Size: "4M (2M SPIFFS)" 
i Debug port: "Disabled" 
void loop() € —lDebugLevel: "Cap" 
ir ese: AF 9 dP Variant: "va Lovver Memory" 
OTAvait(): bles: "Flash" 
digitaUritel VTebles: "Flash 
CPU Frequency: "80 MHz" 


void OTAmait(), 


l 

digitalvrite (Ú Upload Speed: "921600" 

delay(300), 

digitalvri te ( URRRGEErEr 92,168.1.35" Port Serial 
delay(300), Informació de la placa /dev/ttyUSB0 


Programador: "AVRISP mRll" Entrades INetvvorte 
Carrega Bootloader Ll 39c1d aq 192. 


Flash, 4M (2M SPIFFS), v 
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Part X. Altres plaques basades en 
l'ESP8266 


El nostre Rit fa servir el D1 mini, però no hem de limitar els nostres 
coneixements a aquesta placa. Podem aprofitar els nostres 
coneixements a qualsevol placa amb l'ESP8266. 


169 


IoT amb D1 mini (ESP8266) i codi Arduino 


La placa D1. Un ESP8266 amb factor de 
forma Arduino UNO 


Com el seu nom indica la nostra D1 mini va evolucionar a partir 
d'aquesta placa que porta un ESP8266 i reprodueix la placa Arduino 
UNO. Potser interessant per a algun projecte, però jo no la recomano. 
La trobo conflictiva: mapejat dels pins discutible, sense adaptació de 
nivells 3,3 V /5 V ... Ningú ja en parla. Tothom parla de la D1 minil 


PROG OSEE CESGSCSSS ES 
s 558 


(JeMos. laiai 


GROCOO PCSGGGCOSC 


D14/508/04 
015/SCL/03 


o 
a 

si 
el 
n 
rr 

S 
Ni 
o 
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Els mòduls ESP12 V1 i V3. La placa 
NODEMCU Base v1.0 

El mòdul és més ample que el que veurem a Els mòduls ESP12 V2. 
La placa NODEMCU motor shield i porta un xip USB-UART 
CH341 (rectangular). Podem utilitzar directament el mòdul amb una 
breadboard gràcies a les seves potes. 


3V BIB48iHi SE) 
3V Povver IO Povver LED 


USB Povver 
5V Povver Poverin 3NSBE 
USB BiB$Gii — SV Bi538:14 


La placa porta 4 blocs d'alimentació (porta un xip regulador 5V 1A) 
i 4 pins per a cada entrada/sortida del costat dret (només 1 per 
l'esquerre, ja que a la V1 només calia el RS T). 


La V1 es programa a l'arduino IDE seleccionant la placa NODEMCU 
0.9. En canvi, la V3, que té la mateixa mida però més pins assignats, 
correspon a la placa NODEMCU 1.0 de l'arduino IDE. 
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Encara que comparteixen factor de forma i tots dos mòduls són 
compatibles amb la mateixa placa, fixeu-vos que hi ha diferencies en 
el pin-out: 


The NODEMCU Development hit 


SPI 
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PIN DEFINITION 


DEVXIT 


GPI016 


USB povver output l— 


GROUND 


1 


2 
Ah 


DO(GPI016) can only be used as gpio read/urite, no interrupt supported, no pum/i2c/ou supported. 


173 


IoT amb D1 mini (ESP8266) i codi Arduino 


Els mòduls ESP12 V2. La placa NODEMCU 
motor shield 
El mòdul és més estret que el que hem vist a Els mòduls ESP12 V1 i 


V3. La placa NODEMCU Base v1.0 , i porta un xip USB-UART 
CP210x (quadrat). 


Ajusta amb una placa de control de motors amb xip L293D perfecta 
per controlar robots, amb els pins 5,4,0 i 2 (D1, D2, D3, D4). Els 
pins de sortida porten la típica organització compatible amb servo 
amb l'alimentació al mig, en aquest cas de 3,3V. A més a més porta 
un interruptor per apagar el conjunt. 


El 


) can onty be used as gpio reod/urite, no interrupt supparted, no pem/izc/om supported 


Part X. Altres plaques basades en l'ESP8266 


Realment és un conjunt molt interessant ja que amb un preu molt 
econòmic tenim tot el necessari per implementar un robot. 


Un exemple el trobareu a https://github.com/squix78/esp8266- 
projects/tree/master/arduino-ide/Avifi-car. El fet d'ocupar D1 i D2 ens 


obligarà a desplaçar SDA i SCL si volem utilitzar el protocol I2C. 


De fet, trobaren pachs amb aquesta placa i l'estructura bàsica del 
robot a un preu molt raonable. 
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Els mòduls ESP-01. Plaques compatibles 


ESP-01 és una placa amb un ESP8266 amb 512EB o 1IMB de 
memòria" i un nombre molt reduit de connexions. 


(I 


Alicel101983 


i 
au E 
É 
pa 
q: 
l 


UTXD GND 3 

CH PD GPlO24 
RST GPIO03 
VeC URXD —/€ 


Per programar aquest mòduls recomano aquesta placa, que s'endolla 
directament a l'ordinador i porta un commutador per canviar a mode 
programació: 


Trobarem un bon grapat de plaques que utilitzen aquests mòduls: 


41 Podeu fer servir a l'IDE Arduino Exemples b ESP8266 — ChecRFlashConfig 
per determinar la memòria real del vostre ESP-01 
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ESP-01 relay module 


Aquesta placa permet controlar un relé amb el pin GPIOO. 


S'ha d'alimentar amb 5V. 


Veiem un exemple d'implementació AJAX (com a la resta 
d'exemples d'aquest annex, cal copiar els fitxers FSManagerh i 
FSManager.cpp a la mateixa carpeta"): 


Hinclude €FS.hoò 

Htinclude "FSManager.h" 

extern ESP8266lebServer server, 
tdefine PIN Q 


dt Estat: 


void handleRoot() í 
server.send(200, "text/plain", "hello from esp82661"), 
) 


void engegar() 4 

digitalrite(PIN, LOU), 

estat-1l, 

server.send(200, "text/plain", "ON"), 
) 


void apagar() í 
estat 0, 
server.send(200, "text/plain", "OFF"), 
digitalrite(PIN, HIGH), 

) 


42 Veure Annex 9: Afegint la funcionalitat de FSManager als nostres projectes 


177 


IoT amb D1 mini (ESP8266) i codi Arduino 


void canviar() 4 
if(estat--O)( 
digitalrite(PIN, LOU), 
estat-1l, 
Li 
elseí 
digitalrite(PIN, HIGH), 
estat-0, 
) 
server.send(200, "text/plain", "CHANGED"), 
) 


void report() í€ 
String t s String(estat), 
server.send(200, "text/plain", t), 
) 


void setup(void)í 
pinMode (PIN, OUTPUT), 
digitalrite(PIN, HIGH), 
estat - O, 
SPIFFS.begin(), 
initHelper(), //inclou connexió Nifi i server 
server.on("/", handleRoot), 
server.on("/on", engegar), 
server.on("/off", apagar), 
server.on("/change", canviar), 
server.on("/estat", report), 
Server begimç)s 


Ò 


void loop(void)í 
espera(100), 
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DS18B20 Temperature Sensor Module 


Aquesta placa permet mesurar la tempertura amb el pin GPIO2. Es 
pot alimentar amb 3,7 V : 12 V, admeten bateries de Li de 3,7 V. 


TZT 


Veiem un exemple d'implementació AJAX: 


Hinclude €FS.ho 
tinclude "FSManager.h" 
extern ESP8266ebServer server, 
Hinclude sOneVire.hoò 
Hinclude sDallasTemperature.ho 
tdefine ONE NIRE BUS 2 // DS18B20 pin 
Onelire oneMfire(ONE NIRE BUS), 
DallasTemperature DS18B20(80neVire), 
void handleRoot() í 

server.send(200, "text/plain", "hello from esp82661"), 
) 


void temperatura() £€ 
DS18B20. requestTemperatures(), 
float t S DS18B20.getTempCByIndex (0), 
String s s String(t), 
server.send(200, "text/plain", s), 

L 

void setup(void)í 
DS18B20.begin(), 
SPIFFS.begin(), 
initHelper(), //inclou connexió MNifi i server 
server.on("/", handleRoot), 
server.on("/temp", temperatura), 
server.begin(), 
) 

void loop(void)í 
espera(100), 
) 
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ESP-01 DHT11 Temperature Humidity Sensor 
Module 


Aquesta placa permet mesurar la tempertura i la humitat amb el pin 
GPIO2. Es pot alimentar amb 3,7 V : 12 V, admeten bateries de Li de 
3,7 V. Porta un DHT11 amb un protocol d'un sol fil, diferent al del 
nostre Hit, i que utilitza la llibreria DHT sensor. 


TZT 


LT 


Veiem un exemple d'implementació AJAX: 


Hinclude sFS.ho 

Hinclude "FSManager.h" 

extern ESP8266lebServer server, 

Hinclude "DHT.h" 

dtdefine DHTIYPE DHT11 DE da 

èdefine DHTPIN 2 // vhat digital pin me're connected to 
DHT dht(DHTPIN, DHTIYPE), 


void handleRoot() í 
server.send(200, "text/plain", "hello from esp82661"), 
) 


void humitat() 4 
float h s dht.readHumidity(), 
String s s String(h), 
server.send(200, "text/plain", s), 


) 


void temperatura() £€ 
float t s dht.readTemperature(), 
String s s String(t), 
server.send(200, "text/plain", s), 


) 
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ESP-01 Breaout Module 


Aquesta placa és interessant per fer mini-projectes amb l'ESP-01, ja 
que ens dona accés a totes les potes de l'ESP-01. 


TZT En 


182 


Part X. Altres plaques basades en l'ESP8266 


ESP-01 VVS2812 RGB LED Controller module 
Aquesta placa permet controlar tires de leds RGB VVS2812 amb el 
pin GPIO2. Es pot alimentar amb 3,7 V : 5 V, admeten bateries de Li 
de 3,7 V. 


TZT 


TZAT 
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Nano V3.0 I/O 8: VVireless Shield 


RobotDyn fabrica aquesta placa que admet un ESP-01, que només 
interacciona amb la comunicació sèrie de l'Arduino nano de la placa. 
Suficient per esclavitzar l'arduino nano i aprofitar la potència VViFi 
de l'ESP8266. 


Jet 
12 11 40 9 8 7 6 a 3 TE 


" É gir 


13 3.3VREFAO Al A2 A3 MM A5 AS A7 SV RSTGNDVIN 
——— ns — 1 


I J 


TN vol 
IEcEl 


NANO V3 —'mamstaun") 53 
VO 8 VVireless Shield Ester") I J pe 


PU RI PE Pe PEE PJ PO PI 
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Part XI. Altres components externs 
interessants 


Al llarg d'aquests anys he trobat un bon grapat de dispositius que 
m'han sorprès i agradat per mil motius: potència, preu, mida ... 
Voldria compartir amb vosaltres una selecció": 


Sensors 
Brúixola HMC5883L 


Protocol: I2C 
Llibreries: 


https:/github.com/adafruit/Adafruit Se 
nsor ft 


https://github.com/adafruit/Adafruit H 
MC5883 Unified 


Referències: 


https://learn.adafruit.com/adafruit- 
hmc58831-brealout-triple-axis- 
magnetometer-compass-sensor 


Intensitat, tensió i potència: 
INA219 


Protocol: I2C 

Llibreria: 
https://github.com/adafruit/A dafr 
uit INA219 

Referències: 


https://earn.adafruit.com/adafrui 
t-ina219-current-sensor-breaXout 


43 Trobareu una col:lecció més extensa de dispositius a 
https://sites.google.com/a/iepegasoviana.cat/sensors-arduino/ 
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Mòdul CD74HC4067: 
multiplexor analògic 16 €— 1 


Protocol: I2C 
Referències: 


http://blog.codebender.cc/2014/0 
1/30/mux74hc4067/ 


Mòdul PCF8574 I2C I/O 


Protocol: I2C 

Llibreria: 
http://playground.arduino.cc/Mai 
n/PCF8574Class 

Referències: 


http://tronixstuff.com/2010/10/29/tutori 
al-arduino-and-the-i2c-bus-part-tvo/ 


Actuadors 
Motor pas a pas: 28BYJ-48 


Protocol: 4 sortides digitals 
Referències: 
https://sites.google.com/a/iepega 
soviana.cat/sensors- 
arduino/actuadors/motor-pas-a- 
pas-28byj-48 


Mòdul L9110S pont H 


Protocol: 4 sortides digitals 
Referències: 
https:/Avvrv.bananarobotics.com/shop/ 
Hovv-to-use-the-HG7881-(L9110)- 
Dual-Channel-Motor-Driver-Module 
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Mòdul PCA9685 I2C 
16 servos / PV M 


Protocol: I2C 

Llibreria: 
https://github.com/adafruit/A dafruit- 
PVV/M-Servo-Driver-Library 
Referències: 
https://learn.adafruit.com/16-channel- 
pvem-servo-driver 


Comunicacions 


Bluetooth slave: HC-06 


Protocol: sèrie 3,3 V 
Referències: 
https://tronixlabs.com.au/nevvs/tutorial- 
using-hc06-bluetooth-to-serial-vvireless- 
uart-adaptors-vvith-arduino/ 


I2C adaptador de nivells lògics 


Referències: 


https:/Avvrvv. sparifun.com/produ 
cts/12009 


I2C: multiplexor TCA9548A 


Protocol: I2C 
Referències: 
https://learn.adafruit.com/adafruit- 


Li 


tca9548a-1-to-8-i2c-multiplexer- emeu SO 


sc2O 


brealout/viring-and-test2vievcall — le 
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Part XII. VVearables 


El nostre D1 mini és petit i lleuger, perfecte per fer projectes cosits a 
la roba. 


Si bé podem utilitzar els nostres shields, fem una ullada als 
dispositius existents dissenyats expressament per a aquests projectes, 
on fins-i-tot trobarem arduinos que esclavitzar als nostres D1 mini: 


LilyPad LED Light Module LilyPad Pixel Board VV/S2812 
Les 1 module 


LilyPad Povver Suppiy Module AAA 
Battery Step up to 5V Converter 


LilyPad Coin Cell Battery Holder LilyPad 328 Main Board 
CR2032 Battery Mount Module ATmega328P 
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LilyPad Button Board Module LilyPad Slide Svvitch 


LilyPad Tri-Color LED RGB 
Module 
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Annex 1: Microcontrolador ESP8266 


L'ESP8266 és un xip de baix cost SoC amb les segients 
prestacions : microprocessador, pila TCP/IP completa, connectivitat 
VVi-Fi i múltiples ports I/O disponibles, dissenyat per l'empresa 
xinesa Espressif Systems. 


Veiem les seves característiques principals 
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Annex 2: Altres llenguatges de 
programació per l'ESP8266 


Treballar amb l'entorn Arduino no és la única opció que tenim per 
programa el D1 mini. Veiem algunes alternatives: 


NodeMCU 


Basat en el llenguatge de scripts Lua i creat expressament per 
l'ESP8266, concretament el mòdul ESP12 V1 (NodeMCU 0.9) que 
comentem al capítol Els mòduls ESP12 V1 i V3. La placa 
NODEMCU Base v1.0. 


Personalment el trobo més complicat que el Ct- de l'arduino, tal 
vegada per no ser tant familiar. 


Més informació a https://nodemcu.readthedocs.io/en/master/ 


Micropython 


Implementació del llenguatge de programació Python 3 optimitzada 
per executar-se en un microcontrolador. Per tant parlem d'un 
llenguatge d'alt nivell molt potent i fàcilment llegible. 


Trobareu més informació a https://micropython-on-vvemos-di- 
mini.readthedocs.io/en/latest/, on fa servir el D1 mini com a 
plataforma de desenvolupament. 


MicroBlocts 

Llenguatge gràfic inspirat en Scratch" que permet una programació 
dinàmica, parallela i interactiva. Actualment es troba en 
desenvolupament (versió Alpha) . 


44 De fet els creadors de uBlocts són John Maloney, desenvolupador lider de 
Scrath durant 11 anys, Jens Mònig, programador lider de Snap, i Bernat 
Romagosa, autor de Snap4Arduino. 
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Personalment crec que aquest llenguatge té un gran futur i permetrà 
utilitzar el nostre Xit D1 mini fins-i-tot a primària. Temps al temps. 


Disponible a http://microblocEs.fun/ 
BASIC 


Inspirat en el treball de Carl Gundle", podem utilitzar aquest senzill 
llenguatge amb una interfície vveb amb editor, gestor de fitxers ... 
Molt complet i potent. 


Disponible a https:/Avvvv.esp8266basic.com/ 


45 Vegeu http://runbasic.com/ 
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Annex 3: Connexions i compatibilitat dels 


shields 


Shield 
OLED 
Matrix led 
RTC 
Buzzer 
1 button 
RGB 
Relay 
DHT 

IR 

PIR 
CON1 
CON2 


D0 


D1 
Pe 


PC 


Pe 


Pe 


D2 D3 
PC) x 


LC 


LC 


LC 


D4 


D5 


D6 


D7 


pe 


A0 
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Annex 4: D1 mini pro 


Diversos fabricants comercialitzen versions millorades del D1 mini 
amb el nom de D1 mini pro, si bé les seves prestacions i factor de 
forma poden ser ben diferents. 


El propi fabricant VVemos / Lolin n'ha fet 3 versions diferents. 


Les versions V 1.0.0. i V1.1.0 són molts semblants, amb el factor de 
forma de la D1 estàndard. Únicament he trobat diferències mínimes 
(han posat un fusible de 0,5A a 5V, canvis d'alguns condensadors ...) 


Totes dues porten integrada una antena ceràmica i un connector per a 
una antena exterior, i una memòria de 16 MB. 


3) 
— 
21 
o 
Fai 
Li 
3 


o o N 
a Q 
i Pro 


GND 


x 
Ll 
o 
b. 
N 
o 
1 
a 
vn 
Ll 
uU 
4 
nu 
q 
D 


mic 


e D1min 


A la versió V2.0.0. han tornat a l'antena integrada al PCB, però 
mantenen el connector per a antena exterior. Han abandonat el factor 
de forma de la D1 estàndard, amb una placa més allargada, encara 
que compatible amb el bus de la D1 minio estàndard i les seves bases 
doble i triple. Han afegit un connector PH-2VV/O i el circuit de 


195 


IoT amb D1 mini (ESP8266) i codi Arduino 


càrrega per a una bateria de Li, així com un connector I2C. La 
memòria també és de 16 MB. 


RST 
RQ 

SLEE PETI 
SC XE I 
MISOLY: 
MOSIEE) 
SSFB 


3V 


. 
e 
e 
. 
- 
e 
. 
GN 
e 


LDO ENG A T-A8 


LOLIN 
D1 mini Pro 
U2.8.8 
HEMOS.CC 
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Annex 5: Instal-lació Arduino per a 
ESP8266 


Ens caldrà un arduino IDE modern que permeti l'extensió a nous xips 
amb el Gestor targes. Nosaltres actualment fem servir la versió 1.8.5, 
però també hem fet servir la versió 1.6.8 sense cap problema. 


Una vegada instal-lat, hem d'anar a Fitxer-o Preferències 


e sietch may14a J Arduino 1.8.5 
Elixer Edita Esbós Eines Ajuda 
Ctrl N 


CtrlrO 


run once: 


Ctrl vv 
Ctrles 
Gaia in repeatedly: 
Ctrl Shifta P 
CtrlaP 
I Preferències Ctrl Comma 


R 


Tancar Ctrl Q 


) MHz, 4M (1M SPIFFS) 


I omplir l'opció URLs adiccionals de Gestors de plaques amb 


http://arduino.esp8266.com/stable/pactage esp8266com index.json 
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Ajustaments I Xarxa 


Ubicació del SRetchbool: 


/home/jordi/Arduino Navegar 
Editor d'idioma Per defecte del sistema vl. (és necessari reiniciar l'Arduino) 
Mides del Fonts del editor: 13 
Escalat d'interfície E Automàtic 4 (és necessari reiniciar l'Arduino) 

Mostra la sortida detallada durant: (1 Compliació (1 Pujar 
Alertes compilador: Cap v 


El Mostra números de línia 
Activa el plegat de codi 


El Comproveu el codi després de pujar-lo 
Utilitza un editor extern 


El Aggressivi 
EZ Comprova actualitzacions al iniciar 


ache compiled core 


EZ Actualitza fitxer dels shetch a la nova extensió al desar (.pde -s .ino) 
El Guardar mentre verifica o puja 


URLSs addicionals de Gestor de plaques: 


Es poden editar més preferències directament en el fit 


(home/jordi/.arduino15/p rences.txt 


(només editar quan l'Arduino no estigui funcionant 
D'acord Cancellla 
Ara podem anar a Eines-x Tarja -X Gestor targes i escollir esp8266 
per instal-lar-la 


e sietch may14a j Arduino 1.8.5 
Eitxer Edita E 


Ctrl ShiftarM 
CtrleShiftrL 


VVeMos D1 R2 6: mini, 80 MHz, 4M (1M SPIFFS), v2 Lome 
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e Gestor targes 


Tipus (Tot vi Filtra la cerca 


Online hel, a 
More info 


Industruino SAMD Boards (32-bits ARM Cortex-MO-) by Industruino 
Plaques incloses en aquest paquet 

Industruino D21G 

Online help 

More info 


esp8266 by ESP8266 Community versió 2.4.1 INSTALLED 

Plaques incloses en aquest paquet: 

Generic ESP8266 Module, Olimex MOD-VIFI-ESP8266(-DEV), NodeMCU 0.9 (ESP-12 Module), NodeMCU 1.0 (ESP-12E Module), Adafruit HUZZAH 
ESP8266 (ESP-12), ESPresso Lite 1.0, ESPresso Lite 2.0, Phoenix 1.0, Phoenix 2.0, SparlFun Thing, SveetPea ESP-210, V/eMos D1, VVeMos D1 mini, 
ESPino (ESP-12 Module), ESPino (VYROOM-02 Modulel, Vifinfo, ESPDuino, 4D Systems gend loD Range, DigiStump Oah. 

Online help 

More info 


Seleccionaversió / v A Suprimir 


Tanca 


Finalment —baixem — l'arxiu —https://github.com/esp8266/arduino- 
esp8266fs-plugin/releases/dovnioad/0.3.0/ESP8266ES-0.3.0.zip i el 
descomprimiu a la carpeta tools (potser haureu de crear aquesta 
carpeta) de la carpeta Arduino del vostre espai personal 


4 Enrere v java Y cec EE Os) 10096 (8) Vistad'icones. — : aQ 
Llocs v X 4 24 Bjordi Arduino (tools N 

Ordinador — 

Es jordi 

HB Escriptori ESP8266FS 


Li Sistema de... 

IE Documents 

El Baixades 

Ei Música 

dl) Imatges 

(B Vídeos 

3. Paperera 
Dispositius 

ELRS EsP 

E LENovo 

E3 vvindovys 
Xarxa 

i Explora lax... 


11 element, espai lliure: 104,5 GB 


Podeu trobar més informació a https://github.com/esp8266/Arduino 
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Annex 6: Taula de colors RGB 


Aquest array el faig servir al meu exemple Peana per canviar de 
colors un led RGB amb la funció setPixelColor(): 


uint32 t colorll- 
OxFFCOCB, // 
OxFFB6C1, // 
OxFF69B4, // HotP int 
OxFF1493, //J DeepP int 


( 
0 Pin 
i 
2 
3 
OxDB7093, // 4 PaleVioletRed 
5 
6 
7 
8 


LightPint 


0xC71585, // MediumVioletRed 
OxXFFAO7A, // LightSalmon 
OxFA8072, // Salmon 
OxE9967A, // DartSalmon 
0xF08080, // 9 LightCoral 
OxCD5C5C, // 10 IndianRed 
OxDC143C, // 11 Crimson 
OxB22222., // 12 FireBricR 
0x8B0000, // 13 DaríRed 
OxFF0000, // 14 Red 

OxFF4500, // 15 OrangeRed 
OxFF6347, // 16 Tomato 
OXFRZE50, 4/0 7 Coral 
OxFF8C00, // 18 DarhOrange 
OxFFA500, // 19 Orange 
OxFFD700, // 20 Gold 
OxFFFF00, // 21 Yellon 
OxFFFFEO, // 22 LightYellon 
OxFFFACD, // 23 LemonChiffon 
OxFAFAD2, // 24 LightGoldenrodYellon 
OxXFFEFD5, // 25 Papayalhip 
OxFFE4B5, // 26 Moccasin 
OxFFDAB9, // 27 PeachPuff 
OxEEE8AA, // 28 PaleGoldenrod 
OxF0E68C, // 29 RhaRi 
OxBDB76B, // 30 Dartíhahi 
OxFFF8DC, // 31 CornsilR 
OxFFEBCD, // 32 BlanchedAlmond 
OxFFE4C4, // 33 Bisque 
OxXFFDEAD, // 034 Navajonhite 
OXFSDEB3, // 35 uheat 
OxDEB887, // 36 BurlyNood 
OxD2B48C, // 37 Tan 

OxBC8F8F, // —38 RosyBroun 
OxF4A460, // 39 SandyBroun 
OxDAA520, // 40 Goldenrod 
0xB8860B, // 41 DarlGoldenrod 
OxCD853F, // 42 Peru 
OxD2691E, // 43 Chocolate 
0x8B4513, // 44 SaddleBroun 
OxA0522D, // 45 Sienna 
OxA5S2A2A, // 46 Broun 
0x800000, // 47 Maroon 
Ox556B2F, // 48 DarhOliveGreen 
0x808000, // 49 Olive 
Ox6B8E23, // 50 OliveDrab 
Ox9ACD32, // 51 YellonGreen 
0x32CD32, // 52 LimeGreen 
Ox00FF00, // 53 Lime 
Ox7CFC00, // 54 LaunGreen 
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Ox7FFF00, 
OXADFF2F, 
Ox00FF7F, 
OxOOFASA, 
Ox9O0EE90, 
0x98FB98, 
Ox8FBC8F, 
Ox3€CB371, 
Ox2E8B57, 
0x228B22, 
0x008000, 
0x006400, 
Ox66CDAA, 
OxCoFFFF, 
Ox0OFFFF, 
OxEoFFFF, 
OxAFEEEE, 
Ox7FFFD4, 
0x40E0D0, 
Ox48D1CC, 
Ox00CED1, 
Ox20B2AA, 
Ox5F9EAO, 
0x008B8B, 
0x008080, 
OxBOC4DE, 
OxBOEGE6, 
OxXADD8SE6, 
0x87CEEB, 
0x87CEFA, 
Ox0OBFFF, 
OxlESOFF, 
0x6495ED, 
0x4682B4, 
0x4169E1, 
Ox0000FF, 
Ox0000CD, 
0x00008B, 
0x000080, 
8x1919780, 
OxEGEGFA, 
OxD8BFD8, 
OXDDAODD, 
OxXEE82EE, 
OxDA70D6, 
OxFFO0QFF, 
OxXBA55D3, 
0x9370DB, 
Ox8A2BE2, 
0x9400D3, 
ex9932CC, 
0x8B008B, 
0x800080, 
0x4B0082, 
0x483D8B, 
OXG6ASACD, 
Ox7B68EE, 
OxXFFEFEF, 
OxFSF5DC, 
OxXFAEBD7, 
OxFFE4E1, 
0x808080, 


0x708090 


// 
DE 
Ve 
(A 
JA 
A 
DA 
(EP 
JA 
URé 
LE 
(0 
JI 
1n 
PA 
VI 
(EE 
J 
eh 
VM 
(DE 
Ja 
LA 
El 
(EE 
Dl 
JA 
A 
DEA 
( 
JA 
A 
P 
(0 
J 
eh 
A 
(DE 
(A 
pl 
1 
LE 
(8 
JA 
A 
P 
(OE 
JA 
// 
DA 
P4 
(Es 
// 
ah 
P 
(h 
JA 
en 
I 
(El 
/ 
ah 
ah 


Chartreuse 
GreenYellon 
SpringGreen 
MediumSpringGreen 
LightGreen 
PaleGreen 
DarlSeaGreen 
MediumSeaGreen 
SeaGreen 
ForestGreen 
Green 
DarhGreen 
MediumAquamarine 
Aqua 

Cyan 

LightCyan 
PaleTurquoise 
Aquamarine 
Turquoise 
MediumTurquoise 
DarhTurquoise 
LightSeaGreen 
CadetBlue 
DartCyan 

Teal 
LightSteelBlue 
PonderBlue 
LightBlue 
SRyBlue 
LightSRyBlue 
DeepSRyBlue 
DodgerBlue 
CornflomerBlue 
SteelBlue 
RoyalBlue 

Blue 

Medi umBlue 
DarRBlue 

Navy 
MidnightBlue 
Lavender 
Thistle 

Plum 

Violet 

Orchid 

Magenta 
MediumOrchid 
MediumPurple 
BlueViolet 
DarRViolet 
DarROrchid 
DartMagenta 
Purple 

Indigo 
DarRiSlateBlue 
SlateBlue 
MediumSlateBlue 
Vhite 

Beige 
Antiquelhite 
MistyRose 

Gray 

SlateGray 
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Annex 7: Taula de frequències per a les 
notes musicals 


Aquest array el faig servir al meu exemple musica: 


int notes (361(3J) - 


,B00100000, 262), // C5 
,B00100001, 277), // C54 
,B00100010, 294), // D5 
,B00100011,311), // D54 
,B00100100, 3301), // ES 
,800190161, 3491, // F5 
,B00100110, 370), // F5H 
,B00100111, 3923, // 65 
,B00101000, 415), // G5H 
,B00101001, 440), // A5 
,B00101010, 466), // A5H 
,B00101011,494), // B5 
,B00000000, 523), // C6 
,B00000001, 554), // C6H 
,B00000010, 587), // D6 
11,622), // D64 
,B00000100, 6069), // EG 
,B00000101, 698), // F6 
,B00000110, 740), // F6f 
,B00000111, 784), // G6 
,B00001000, 831), // G6H 
,B00001001, 880), // A6 
,B00001010, 932), // AGH 
,B00001011, 988), // B6 
,B00010000, 10473, // C7 
,B00010001, 11093, // C7H 
,B00010010, 1175), // D7 
,B00010011, 1245), // D7H 
,B00010100, 1318), // E7 
,800010101, 1396), // F7 
,B00010110, 14803, // F7fH 
,B00010111, 1568), // G7 
,B00011000, 16613, // G7H 
,B000110601, 1760), // A7 
,B00011010, 1865), // A7fH 
,B00011011, 1975), // B7 


RLU CIDO RIU UD OOM-— EC LC HI mo EE oo ODO— oa, 
— 
o 
o 
o 
o 
o 
(Es) 
HH 


mama mama mama mama mama mumumumu ml 
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Annex 8: Firmvvare de l'arduino pro mini 


Podem utilitzar un mòdul FIDI232 endollant-lo directament a 
l'arduino pro mini per carregar el firmvvare: 


DTR 
RX 
1 CO 
VCC 
CIS 
GND 
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I2CsapmR1. firmvvare.h (V1.0) 


tdefine I2CsapmR1 AQ 
èdefine I2CsapmRi A1 
tdefine I2CsapmRi A2 
èdefine I2CsapmRi A3 
tdefine I2CsapmR1 A6 
èdefine I2CsapmR1i A7 
èdefine I2CsapmRi D2 


tdefine I2CsapmRi D3 


èdefine I2CsapmRi D4 


tdefine I2CsapmRi D5 


èdefine I2CsapmRi D6 


tdefine I2CsapmRi D7 


èdefine I2CsapmRi D8 


tdefine I2CsapmRi D9 


èdefine I2CsapmRi D10 1 


tdefine I2CsapmRi D11 1 


èdefine I2CsapmRi D12 1 
tdefine I2CsapmRi D13 1 
tdefine I2CsapmRi M2 
èdefine I2CsapmRi M3 
tdefine I2CsapmRi M4 20 
èdefine I2CsapmRi M5 21 
tdefine I2CsapmRi M6 22 
èdefine I2CsapmRi M7 23 
tdefine I2CsapmRi M8 24 
èdefine I2CsapmRi M9 25 
tdefine I2CsapmR1i M10 26 
èdefine I2CsapmRi M11 27 
tdefine I2CsapmRi M12 28 
èdefine I2CsapmRi M13 29 


DONDQUBUNTFODONQUBUVNF-O 


I2CsapmR1. firmvvare.cpp (V1.0) 


Hinclude "I2CsapmR1i firmmvare.h" 
Hinclude sNire.hx 
tdefine I2CADDR 2 


byte ordre - 0, 
byte dada - 0, 


int analini6l, 
int digmii2): 
int digdii21: 


dt ds 


void setup() 4 
pinMode (2, INPUT), 
pinMode (3, INPUT), 
pinMode (4, INPUT), 
pinMode(5, INPUT), 
pinMode(6, INPUT), 
pinMode (7, INPUT), 
pinMode (8, INPUT), 
pinMode (9, INPUT), 
pinMode(10, INPUT), 
pinMode(11,INPUT), 
pinMode (12, INPUT), 
pinMode (13, INPUT), 
for (isO,ici2,itt) digmlilSINPUT, 
Nire.begin(I2CADDR), 
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) 


Mire.onReceive(escolta), 
Nire.onRequest(respon), 


void 100p() 


) 


analinIlOl-canalogRead(A0), 
analiniil-sanalogRead(A1), 
analini2l-analogRead(A2), 
analinl3l-analogRead(A3), 
analini4J-analogRead(A6), 
analini5lsanalogRead(A7), 
for (10715127 d41)4 

if ((digmlils-INPUT) 


I 


(digmlilSSINPUT. PULLUP)) fí 


digdíil-digitalRead(it2), 


void escolta(int ordrelen) 4 


ordre — Vire.read(), 
if (ordrelen:1) 4 
dada — Vire.read(), 
sxitch(ordre) 4 


case I2CsapmRi M2: 
pinMode(2,dada), 
breah, 

case I2CsapmRi M3: 
pinMode(3,dada), 
breah, 

case I2CsapmRi M4: 
pinMode(4,dada), 
breah, 

case I2CsapmRi M5: 
pinMode(5,dada), 
breaR, 

case I2CsapmRi M6: 
pinMode(6,dada), 
breah, 

case I2CsapmRi M7: 
pinMode(7,dada), 
breah, 

case I2CsapmRi M8: 
pinMode(8,dada), 
breaR, 

case I2CsapmRi M9: 
pinMode(9,dada), 
breah, 


case I2CsapmRi M10: 
pinMode(10,dada), 


breah, 


case I2CsapmRi M11: 
pinMode(11,dada), 


breah, 


case I2CsapmRi M12: 
pinMode(12,dada), 


breah, 


case I2CsapmRi M13: 
pinMode(13,dada), 


brean, 
case I2CsapmRi D2: 


digitalrite(2,dada), 


breah, 
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case I2CsapmRi D3: 
digitallrite(3,dada), 
breaR, 
case I2CsapmRi D4: 
digitalrite(4,dada), 
breaR, 
case I2CsapmRi D5: 
digitalrite(5,dada), 
breaR, 
case I2CsapmRi D6: 
digitalrite(6,dada), 
brear, 
case I2CsapmRi D7: 
digitalrite(7,dada), 
brear, 
case I2CsapmRi D8: 
digitalrite(8,dada), 
brearR, 
case I2CsapmRi D9: 
digitalrite(9,dada), 
brear, 
case I2CsapmRi D10: 
digitalNrite(10,dada), 
breaR, 
case I2CsapmRi D11: 
digitalrite(11,dada), 
brearR, 
case I2CsapmRi D12: 
digitalrite(12,dada), 
brear, 
case I2CsapmRi D13: 
digitalrite(13,dada), 
breaR, 
) 
) 


) 


void respon() í 
int resposta, 
smitch(ordre) 
case I2CsapmRi A0: 
resposta - analinio 
brear, 
case I2CsapmRi Al: 
resposta - analini1l, 
breaR, 
case I2CsapmRi A2: 
resposta - analinl2 
brea, 
case I2CsapmRi A3: 
resposta - analiní(3l, 
brear, 
case I2CsapmRi A6: 
resposta - analiní(4), 
brega, 
case I2CsapmRi A7: 
resposta - analinl5 
brea, 
case I2CsapmRi D2: 
resposta - digdIo 
breaR, 
case I2CsapmRi D3: 
resposta - digdi1), 
brear, 
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case I2CsapmR1 D4: 
resposta - digdí2), 
breaR, 
case I2CsapmRi D5: 
resposta - digd(31, 
breah, 
case I2CsapmRi D6: 
resposta - digdi4), 
breah, 
case I2CsapmR1 D7: 
resposta - digdí5), 
breah, 
case I2CsapmRi D8: 
resposta - digdi6), 
breah, 
case I2CsapmRi D9: 
resposta - digdi7l, 
breaR, 
case I2CsapmRi D10: 
resposta - digdí8l, 
breah, 
case I2CsapmRi D11: 
resposta - digdí9), 
breah, 
case I2CsapmRi D12: 
resposta - digdí10/J, 
breaR, 
case I2CsapmRi D13: 
resposta - digdí11), 
breah, 
default: 
resposta - -1, 
breaR, 


i 

byte buffer(21, 
bufferlOlsresposta 22 8, 
buffer(ilscresposta 8 Oxff, 
Mire.urite(buffer,2), 
ordre-0, 


) 
Podem adaptar aquest firmvvare a les nostres 
possibilitats són infinitesi 
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Roboto 
vin. robotdyn.com 
PINOUT DIAGRAM 

ProMini 
ATmega3e8P 


—--- PM Pin — pGNo Port Pin (2 Pin function 
P povver (UB mnaiog Pin (CD serial Pin (INT 
PB coniroi (CD Physical Pin (CC) interruptPin (DJ) IDE 
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Annex 9: Afegint la funcionalitat de 
FSManager als nostres projectes 


Com vau veure a Incloure eines HTML5 a la SD virtual si voleu 
afegir FSManager al vostre programa només cal copiar els arxius 
FSManager.cpp i FSManager.h a la carpeta del vostre programa i 
afegir al principi les línies: 


Hinclude €FS.hoò 
Hinclude "FSManager.h" 
extern ESP8266lebServer server, 


i al setup) 


SPIFFS.begin(), 
initHelper(), //inclou connexió Nifi i server 

// Aquí podem afegir altres funcions server.on() 
server.begin(), 


I fer servir la funció espera() al loopO) en lloc de delay() per poder 
atendre les peticions vveb. 


Recordeu canviar a l'inici de FSManager.cpp el nom de la vostre 
Xarxa i contrasenya i, Si s'escau, el mode VViFi. 


Contingut de FSManager:h: 


Hinclude cESP8266ViFi. ho 
Hinclude sMiFiClient.hoò 
Hinclude cESP8266MebServer . ho 
tdefine DBG OUTPUT PORT Serial 
Hinclude €FS.ho 


// Helper functions prototypes 
void ORRetorn(), 

void printDirectory(), 

void ajaxDirectory(), 

void handleFileCreate(), 

void handleFileDelete(), 

void handleFileUploadí), 

String formatBytes(size t bytes), 
String getContentType(String filename), 
bool handleFileRead(String path), 
void handleFileEditÚ), 

void handleFileSave(): 

void int Helper Os: 

void initvifi(), 

void pageHead(), 

void espera(int temps), 
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Contingut de FSManager.cpp: 


Hinclude cESP8266MiFi.ho 
Hinclude cNiFiClient.ho 
Hinclude cESP8266MebServer . ho 
tdefine DBG OUTPUT PORT Serial 
Hinclude cFS.ho 


// Helper functions prototypes 
void ORRetorn(), 

void printDirectory(), 

void ajaxDirectory(), 

void handleFileCreate(), 

void handleFileDelete(), 

void handleFileUploadí), 

String formatBytes(size t bytes), 
String getContentType(String filename), 
bool handleFileRead(String path), 
void handleFileEdit(), 

void handleFileSave(): 

void. initHelper()s 

void initvifi(), 

void pageHead(), 

void espera(int temps), 


const chart ssid - "nom de la xarxa", 

const chart passmord € "contrasenya", 

const chart host - "esp8266fs", 

// tria el tipus de connexió. Client NIFI STA, Access Point VIFI AP 
tdefine MODE NIFI NIFI STA 


ESP8266ebServer server(80), 
File fsUploadFile, 


void espera(int temps) ( 
unsigned long ara € millis(), 
unsigned long seguent - ara t temps, 
delay(1), //refresh matchdog 
mhile (millis()sseguent)í 

server.handleClient(), 

) 

L 


void pageHead()( 
server.setContentLength (CONTENT LENGTH UNRNONN) , 
serverssend(290, "text/ntmi tt, 0) 


server.sendContent ("€IDOCTYPE htmloshtmloòsheadostitlesGestigoacute, 


fitxersre/titleocmeta charsets'UTF-8'o cmeta names'viemport' 
contents 'midth-device-midth'/oe/heado sbodyò"), 


) 


void initvifi()( 
DBG OUTPUT PORT .begin(115200), 
if (MODE MIFISSMNIFI STA) 4 
NiFi.mode(lNIFI STA), 
NiFi.begin(ssid, passmord), 
DBG OUTPUT PORT.printf ("Connecting to 3sin", ssid), 
mhile (MiFi.status() l- VL CONNECTED) 4 
delay(500), 
DBG OUTPUT PORT.print("."), 


) 
DBG OUTPUT PORT .printinÇ""), 
DBG QOUTPUT PORT.prinmt("Connectedi IP address: "): 
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DBG OUTPUT PORT .println(VNiFi.localIP()), 


DBG QUTPUT PORT,print("Open httpi//"): 

DBG OUTPUT PORT.print(ViFi.localIP()), 

DBG QUIPUT PORT,printint"/dir to see the file bronser"): 
) 
else ( 

NiFi.mode(lIFI AP), 

NiFi.sSoftAP(ssid, passmord), 

DBG OUTPUT PORT.print("Open http://192.168.4.1/dir to see the file 

brouvser"), 


) 


) 


void initHelper()( 

DBG: QUIPUT PORT.Bprint( in"): 

DBG OUTPUT PORT.setDebugOutput(true), 
Dir dir € SPIFFS.openDir("/"), 
nhile (dir.next()) 4 

String fileName - dir. fileName(), 
Size t fileSize - dir.fileSize(), 
DBG QUTPUT PORT.orinmti ("FS File: Xs, size: Xsvm", TileName.c strí), 
formatBytes(fileSize).c str)), 
DEBG GUIPUT PORT printí (Tn): 
) 


initvifiQ), 


/ /SERVER INIT 
server.on("/dir", HTTP GET, printDirectory), 
server.on("/ajaxdir", HTTP GET, ajaxDirectory), 
server.on("/create", HTTP GET, handleFileCreate), 
server,oní"idelete", HITP GET, handleriteDelete): 
//first callbacíh is called after the request has ended vith all parsed 
arguments 
//second callbach handles file uploads at that location 
server,ont"/fuplosd", HITP POST, Il) 4 
OtRetorn(): 
v, handleFileUpload), 
server.on("/edit", HTTP GET, handleFileEdit), 
server.on("/save", HTTP POST, handleFileSave), 
//called mhen the url is not defined here 
//use it to load content from SPIFFS 
server.onNotFound(IJ() í 
if (IhandleFileRead(server.uri())) ( 
server.send(404, "text/plain", "FileNotFound"), 
) 
RE 


// server.begin(), 


) 


void ORRetorn() 4 

pageHead(), 

server.sendContent ("Operacigioacute, realitzada amb 8Zegrave:xitebr/o ca 
href-'/dir'oTornar a gestigioacute, de fitxerse/axs/bodyoc/htmlò"), 


) 


void printDirectory()4 
Dir dir € SPIFFS.openDir("/"), 
pageHead(), 
server.sendContent ("shisxGestigioacute:, de fitxers SD virtuals/hn1o"), 
nhile (dir.next()) 4 
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String fileName - dir.fileName(), 

size t fileSize - dir.fileSize(), 

DBG OUTPUT PORT.printf("FS File: 42s, size: 2svn", fileName.c str(), 
formatBytes(fileSize).c strÚ)), 

String output, 

output ts "ca hrefc'/", 

output ts fileName.substring(1), 

output ts''ò", 
output ts fileName.substring(1), 

output ts"e/a) ", 

output t- formatBytes(fileSize).c str(), 

output ts " ca hrefs'", 

output t- fileName, 

output t-"2domnload-i' style-'text-decoration: none,'ò 849921, 
c/axènbsp:enbsp,", 
output ts " ca hrefs'/edit2zfec", 
output ts fileName, 
output t-"' style-'text-decoration: none,'2x 849997, e/ax8nbsp,ganbsp,", 


output 45 " ca href-'/deletezrillfitxers", 
output t- fileName, 
output ts"' styles'text-decoration: none,'o 8H10006, s/axebr/oò", 


server.sendContent (output), 
DBG OUTPUT PORT.println(output), 


) 

ESUnfor fs infos 

SPIFFS.info(fs info), 

String output, 

output ts formatBytes(fs info.usedBytes).c str(), 
output ts" ocupats de ", 

output ts formatBytes(fs info.totalBytes).c str(), 
output ts" totals", 

output ts"ebr/ocbr/o", 

server.sendContent (output), 


server.sendContent ("ebr/ocform action-'/create'xFitxer nou: cinput 
types'text' names'noufitxer' values''x ocinput types'submit' 
values'Crea'oe/formo"), 

server.sendContent ("ebr/oceform method-'post' enctype-'multipart/form-data' 
actions'/upload'oFitxer a enviar: cinput types'file' namecs'myFile'ocinput 
types'submit' values'Envia'xe/formv"), 

server. sendContent ("s/bodyos/htmlò"), 


) 


void ajaxDirectory()í( 
server.setContentLength (CONTENT LENGTH UNRNONN) , 
server.send(200, "text/plain", ""), 
Dir dir €S SPIFFS.openDir("/"), 
nmhile (dir.next()) í 
String fileName - dir. fileName(), 
String output, 
output ts fileName, 
output ts",", 
server.sendContent (output), 


void handleFileCreate() 4€ 


if (server.args() ss 0) 

return server.send(500, "text/plain", "BAD ARGS"), 
) 
String path s "/" £ server.arg("noufitxer"), 


DBG OUTPUT PORT.println("handleFileCreate: " t path), 
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) 


if (path ss "/") 

return server.send(500, "text/plain", 
) 
if (SPIFFS.exists(path)) í 

return server.send(500, "text/plain", 
) 
File file - SPIFFS.open(path, "m"), 
TR ICL EN A 

file.close(), 
) else ( 

return server.send(500, "text/plain", 
) 
OtRetorn(): 
path - String(), 


void handleFileDelete() 4 


) 


if (server.args() SS 0) 
return server.send(500, "text/plain", 


) 
String path S server.arg("Rillftitxer"): 


NBADS PAT 


SFILE EXISTS" Vs 


SOREATE FAILEDTY: 


"BAD ARGS"): 


DBG OUTPUT PORT.println("handleFileDelete: " t path), 


it (path cs TV") 4 
return server.send(500, "text/plain", 


) 
if (ISPIFFS.exists(path)) ( 
return server.send(404, "text/plain", 


) 
SPIFFS.remove(path), 
OtRetorn(): 

path - String(), 


void handleFileUpload() 4 


) 


if (server.uri() l- "/upload") 4 
Fer uRn, 


) 

HTTPUploadé: upload - server.upload(), 
if (upload.status s- UPLOAD FILE START) 
String filename - upload.filename, 
if (lfilename.startsVitA("/T)) 4 

filename € "/" 4 filename, 


UBAD, PAU 


"FileNotFound"), 


( 


) 
DBG OUTPUT PORT .print("handleFileUpload Name: "), 
DBG OUTPUT PORT.println(filename), 


fsUploadFile — SPIFFS.open(filename, 
filename - String(), 


tx"): 


) else if (upload.status s- UPLOAD FILE URITE) 4 
//DBG OUTPUT PORT.print("handleFileUpload Data: "), 
DBG OUTPUT PORT.println(upload.currentSize), 


if (fsUploadFile) 4 


fsUploadFile.mrite(upload.buf, upload.currentSize), 


) 


) else if (upload.status s- UPLOAD FILE END) 4 


if (fsUploadFile) 4 
fsUploadFile.close(), 


) 
DBG OUTPUT PORT.print("handleFileUpload Size: "), 
DBG OUTPUT PORT .println(upload.totalSize), 


) 


String formatBytes(size t bytes) 4 


if (bytes € 1024) 4 
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return String(bytes) t "B", 
) else if (bytes € (1024 1t 1024)) 4 
return String(bytes / 1024.0) - "RB", 
) else if (bytes € (1024 Y 1024 t 1024)) 4 
return String(bytes / 1024.0 / 1024.0) 4 "MB", 
) else ( 
return String(bytes / 1024.0 / 1024.0 / 1024.0) - "GB", 


) 


String getContentType(String filename) 4 
if (server.hasArg("domnload")) 4 
return "application/octet-stream", 

se if (filename.endsVith(".htm")) £Ç 
turn "text/html", 
se if (filename.endsVith(".html")) £Ç 
turn "text/html", 
se if (filename.endsVith(".css")) 4 
turn "text/css", 
se if (filename.endsNith(".jis")) £€ 
turn "application/javascript", 

se if (filename.endsvith(".png")) £€ 
turn "image/png", 
se if (filename.endsNith(".gif")) € 
turn "image/gif", 
se if (filename.endsNith(".jipg")) € 
turn "image/jpeg", 
se if (filename.endsNith(".svg")) 4 
turn "image/svgtxml", 
se if (filename.endsVith(".ico")) 4 


) 
) 


o -n no -n no -n no 


o 


eturn "image/x-icon", 

) se if (filename.endsVith(".xml")) £Ç 
eturn "text/xml", 

) se if (filename.endsNith(".pdf")) 4 
eturn "application/x-pdf", 

) se if (filename.endsNith(".zip")) € 
eturn "application/x-zip" 


se if (filename.ends ithlt.gz')) í 
turn "application/x-gzip", 


) 
) 


return "text/plain", 


Le 
SD TR IO TD ID DS BD I DN DC ID 3 OD 


o 


) 


bool handleFileRead(String path) 4 
DBG OUTPUT PORT.println("handleFileRead: " t path), 
if (path.endsNith("/")) 4 
path ts "index.htm", 
) 
String contentType - getContentType(path), 
String pathldithGz -s path t ".gz", 
if (SPIFFS.exists(pathNithGz) JJ SPIFFS.exists(path)) 4 
if (SPIFFS.exists(pathNithGz)) 4 
path ts ".gz", 
h 
File file - SPIFFS.open(path, "r"), 
server.streamFile(file, contentType), 
file.close(), 
return true: 


return false, 


) 


void handleFileEdit() 4 
if (server.args() SS 0) ( 
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return server.send(500, "text/plain", "BAD ARGS"), 
h 
String path - server.arg("fe"), 
DBG OUTPUT PORT.println("handleFileEdit: " t path), 
if (path ss "/") 4 

return server.send(500, "text/plain", "BAD PATH"), 


) 
if (ISPIFFS.exists(path)) ( 
DBG OUTPUT PORT .print("handleFileEdit Name: "), 
DBG OUTPUT PORT.print(path):DBG OUTPUT PORT.println(" FileNotFound"), 
return server.send(404, "text/plain", "FileNotFound"), 
) 
pageHead(), 
server.sendContent ("eform action-'/save' method-'POST'oòFitxer: sinput 
types'text' names'nomfitxer' valuezs'"), 
server.sendContent (path), 
server.sendContent("' readonlyosbr/ostextarea names'cos' rouss'30' cols-s'40' 
Mraps'off'2"), 


File file - SPIFFS.open(path,"r"), 
char buffer(2), 
bufferi1ll) -— O, 
// server.streamFile(file, "text/plain"), 
mhile (file.readBytes(buffer, 1)1-0 ) 4 
server.sendContent (buffer), 


file.close(): 
server.sendContent ("e/textareax ebrocinput types'submit' 
value-'Desa'xe/formos/bodyoe/htmlo"), 


path - String(), 
) 


void handleFileSave() 4 
String path s server.arg("nomfitxer"), 
String text s server.arg("cos"), 
DBG OUTPUT PORT.println("handleFileSave: " t path), 
DBG QUTPUT PORT.println("text: " t text), 
File file - SPIFFS.open(path, "n"), 
if (lfile) 4 
DBG OUTPUT PORT.println("file open failed"), 
) 
file.print(text), 
file.close(), 
OtRetorn(): 
path - String(), 
text s String(), 
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Annex 10: Plantilla connexions projecte D1 


Projecte: 
Data: 
Alumnes: 
D1 mini GPIO Shield / mòdul Notes 
D0 16 
D1 / SCL 5 
D2 / SDA 4 
D3 0 pull-up 12 RO2 
DA LED BUNTIN 
D5 14 
D6 12 
D7 18 
D8 15 pull-dovn 12 RO2 
20 2 sot 
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Annex 11: Llistat del fitxer OTA.cpp 


Al capítol Part IX. Actualització VViFi del programa (OTA) vam 
veure com podem actualitzar per VViFi el nostre programa. Aquí teniu 
el llistat del fitxer OTA.cpp que heu de copiar a la carpeta del vostre 
programa: 


Hinclude cESP8266VNiFi. ho 
Hinclude cESP8266mDNS. ho 
Hinclude sMiFiUdp.ho 

Hinclude sArduinoOTA.hoò 


const chart OTAssid - "nom de la xarxa", 
const chart OTApassmord - "contrasenya", 


void OTAmvait()í( 
NiFi.mode(UIFI STA), 
NiFi.begin(OTAssid, OTApassuord), 
mhile (MiFi.maitForConnectResult() l- NL CONNECTED) delay(1), 
// Port defaults to 8266 
// ArduinoOTA.setPort(8266), 
// Hostname defaults to esp8266-IChipIDJ 
// ArduinoO0TA.setHostname ("myesp8266"), 
// No authentication by default 
// ArduinoOTA.setPassmord("admin"): 
// Passxord can be set vith it's md5 value as vell 
// MD5(admin) -s 21232f29725725274389420e42801fC3 
// ArduinoOTA.setPassmordHash("21232f297a257252743894200e42801fC3"), 
ArduinoO0TA.onStart(IJO 4 
String type, 
if (ArduinoOTA.getCommand() s- U FLASH) 4 
type S "sRetch", 
) else ( // U SPIFFS 
type - "filesystem", 


i 
// NOTE: if updating SPIFFS this vould be the place to unmount SPIFFS using 
SPIFFS.end() 
Serial.printin("Start updating " t type), 
JO 
ArduinoO0TA.onEnd(IJO) £€ 
Serial.printin("inEnd"), 
0n 
ArduinoO0TA.onProgress(Ll(unsigned int progress, unsigned int total) 4 
Serial.printf("Progress: 3u84Nr", (progress / (total / 100))), 
ADE 
ArduinoO0TA.onError(ll(ota error t error) 4 
Serial.printf("Errorlaul: ", error), 
if (error ss OTA AUTH ERROR) ( 
Serial.printin("Auth Failed"), 
) else if (error s- OTA BEGIN ERROR) 
Serial.printlin("Begin Failed"), 
) else if (error ss OTA CONNECT ERROR) 4 
Serial.printlin("Connect Failed"), 
) else if (error s- OTA RECEIVE ERROR) ( 
Serial.printlin("Receive Failed"), 
) else if (error ss OTA END ERROR) 4 
Serial.printin("End Failed"), 
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